javascript - 使用AngularJs制作每月出勤报告 | 使用AngularJs制作每月出勤报告

我有需要在表中显示的员工记录

<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
  <table class="table table-bordered">
    <thead>
      <th>Name</th>
      <th ng-repeat="(key,i ) in getNumber(number) track by $index" ng-data="{{key}}">{{$index+1}}</th>
    </thead>
    <tbody>
      <tr ng-repeat="(key,employee) in emprecords">
        <td>{{employee.name}}</td>
        <td ng-repeat="attendance in employee.attendance track by $index">{{$index+1 === attendance.day ? 'p '+ attendance.day : 'a '+ attendance.day}}</td>
      </tr>
  </table>
</div>

最佳答案

// Code goes here

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {

    $scope.number = 31;
    $scope.getNumber = function (num) {
        return new Array(num);
    };

    $scope.emprecords = [
      {
    "id": "1",
    "name": "Franz Ebert",
    "address": "804 Parker Meadows Suite 326\nBryanafurt, VA 07882",
    "phone": "(495) 696-7004 x4828",
    "mobile": "574-670-6661 x966",
    "place": "Lake Nickolas",
    "basic": "5098.00",
    "ta": "846.00",
    "da": "833.00",
    "hra": "743.00",
    "medical": "583.00",
    "total": "918.00",
    "joinDate": "1976-09-28",
    "releavingDate": "1979-03-30",
    "employeeType": "Non Office Staff",
    "photo": "profile.jpg",
    "active": "1",
    "created_at": "2016-10-06 03:53:18",
    "updated_at": "2016-10-06 03:53:18",
    "attendance": [
      {
        "id": "1",
        "employees_id": "1",
        "date": "2015-03-01",
        "present": "1",
        "note": "parayathea poyi",
        "remark": "edited",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 06:35:55",
        "day": 1
      },
      {
        "id": "2",
        "employees_id": "1",
        "date": "2015-03-02",
        "present": "0",
        "note": "",
        "remark": "Sequi ut quam recusandae sed delectus harum.",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 03:53:42",
        "day": 2
      },
      {
        "id": "3",
        "employees_id": "1",
        "date": "2015-03-03",
        "present": "1",
        "note": "",
        "remark": "Est nihil omnis consectetur ut vel eligendi accusantium voluptas.",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 03:53:42",
        "day": 3
      },
      {
        "id": "4",
        "employees_id": "1",
        "date": "2015-03-04",
        "present": "0",
        "note": "",
        "remark": "A at totam autem cumque.",
        "created_at": "2016-10-06 03:53:42",
        "updated_at": "2016-10-06 03:53:42",
        "day": 4
      }
    ]
  }];
});

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="bootstrap" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <table class="table table-bordered">
    <thead>
      <th>Name</th>
      <th ng-repeat="(key,i ) in getNumber(number) track by $index" ng-data="{{key}}">{{$index+1}}</th>
    </thead>
    <tbody>
      <tr ng-repeat="(key,employee) in emprecords">
          <td>{{employee.name}}</td>


<td  ng-repeat="(key2,i2 ) in getNumber(number) track by $index" ng-data="{{key2}}">{{(($index + 1) == employee.attendance[$index].day && employee.attendance[$index].present == "1") ? 'p' : 'a'}} </td>
      </tr>
  </table>
</body>

</html>

关于javascript - 使用AngularJs制作每月出勤报告，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39929357/