angularjs在json提要中增加项目答案

【问题标题】：angularjs increment items in a json feedangularjs在json提要中增加项目
【发布时间】：2015-03-29 23:11:10
【问题描述】：

我有一份学生名单，以及他们是否在课堂上。

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>

如果学生在场或缺席，我想要做的是 foreach 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

【问题讨论】：

标签： javascript json angularjs foreach angularjs-ng-repeat

【解决方案1】：

试试这个

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>

【讨论】：

【解决方案2】：

有（一如既往）更多的方法可以做到这一点，在附加的 sn-p 中，我准备了 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>

【讨论】：