angularjs 增加 json 提要中的项目

Question

我有一份学生名单，以及他们是否参加了 class。

var studentList = [
    {id: '111', name: 'Anna', present: '1'},
    {id: '222', name: 'Bob', present: '1'},
    {id: '333', name: 'Cath', present: '1'},
    {id: '111', name: 'Anna', present: '0'},
    {id: '222', name: 'Bob', present: '0'},
    {id: '333', name: 'Cath', present: '1'}
];

我想输出一些 html 产生以下结果。

<ul>
  <li>Cath || 2</li>
  <li>Anna || 1</li>
  <li>Bob || 1</li>      
</ul>

如果学生在场或缺席，我想做的是计算每个 ID 计数，然后在页面底部提供总数。

这是我目前所拥有的。

<div ng-controller="MainController"> 
    <ul>
        <li ng-repeat="student in students">{{ student.name }} ||{{student.present}}<li>
    </ul>
</div>

<script>
angular.module('app',[])
.controller('MainController', function($scope) {
  var studentList = [
    {id: '111', name: 'Anna', present: '1'},
    {id: '222', name: 'Bob', present: '1'},
    {id: '333', name: 'Cath', present: '1'},
    {id: '111', name: 'Anna', present: '0'},
    {id: '222', name: 'Bob', present: '0'},
    {id: '333', name: 'Cath', present: '1'}
  ];
  $scope.students = studentList;
  var presntTotal = 0;
    $scope.students.forEach(function(item) {
      presntTotal += parseInt(item.present,10);
    }); 
    $scope.presntTotal = presntTotal;  
    console.log(presntTotal); //outputs 4
});
</script>

如何为每个学生获取 presentTotal，以便我可以像上面显示的那样显示它？ see codepen demo

Answer 1

（一如既往）有更多方法可以做到这一点，在附加的代码片段中，我准备了 JS 代码中的数组以直接显示。但是您可以保留数组原样并在 ng-repeat 中的 HTML 中使用 Angular 的 filters（某种 unique 和 sum 将需要过滤器）。

angular.module('app', [])
  .controller('MainController', function($scope) {
    var studentList = [{
      id: '111',
      name: 'Anna',
      present: '1'
    }, {
      id: '222',
      name: 'Bob',
      present: '1'
    }, {
      id: '333',
      name: 'Cath',
      present: '1'
    }, {
      id: '111',
      name: 'Anna',
      present: '0'
    }, {
      id: '222',
      name: 'Bob',
      present: '0'
    }, {
      id: '333',
      name: 'Cath',
      present: '1'
    }];

    console.log('studentList', studentList);



    $scope.studentListReduced = studentList.reduce(function(previousValue, currentValue) {
      var found = false;

      previousValue.forEach(function(item) {
        if (item.name == currentValue.name) {
          item.present = parseInt(item.present, 10);
          item.present += parseInt(currentValue.present, 10);
          found = true;
        }
      });

      if (!found) {
        previousValue.push(currentValue);
      }

      return previousValue;
    }, []);

    console.log('$scope.studentListReduced', $scope.studentListReduced);

    $scope.total = $scope.studentListReduced.reduce(function(previousValue, currentValue) {
      return previousValue + currentValue.present;
    }, 0);

    console.log('$scope.total', $scope.total);

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainController">
    <ul>
      <li ng-repeat="student in studentListReduced ">{{ student.name }} || {{student.present}}</li>
    </ul>
    {{total}}
  </div>
</div>

Answer 2

试试这个

angular.module('app',[])
.controller('MainController', function($scope) {
  var studentList = [
    {id: '111', name: 'Anna', present: 1},
    {id: '222', name: 'Bob', present: 1},
    {id: '333', name: 'Cath', present: 1},
    {id: '111', name: 'Anna', present: 0},
    {id: '222', name: 'Bob', present: 0},
    {id: '333', name: 'Cath', present: 1}
  ];
    $scope.students = studentList;
    var students = {}
    var stu_count = {}
    var presentData = []
    studentList.forEach(
        function(e){
            if(!students[e.name]){
                students[e.name] = 0
                stu_count[e.name] = 0
            }
            students[e.name] += e.present
            stu_count[e.name]++
        }
    );
    for(var name in students){
        presentData.push({name : name, present :  stu_count[name]})
    }
    $scope.presntTotal = presentData;
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainController">
    <ul>
      <li ng-repeat="student in presntTotal ">{{ student.name }} || {{student.present}}</li>
    </ul>
  </div>
</div>

angularjs 增加 json 提要中的项目

angularjs increment items in a json feed

javascript

foreach

json

angularjs

angularjs-ng-repeat