1

这是示例 plunker http://embed.plnkr.co/bJFmT0WlRfqUgrCxZRT6

首先：我正在按某个键对集合进行分组 - 在我的示例中是 yob。

我有两个选择——

  • 我可以编写一个自定义函数来完成这项工作（我想这样做，因为我可以添加自定义逻辑）
  • 我可以使用 lodash/underscore.js 提供的 _.groupBy

所以我决定尝试这两种方法 - 使用 lodash 我按一个键对集合进行分组并显示输出（参见 plunkr）

当我使用自定义方法时，studentsByYear在这种情况下，数组在显示之前以某种方式变为空。在返回数组之前，我已经控制台记录了我的输出，并且数组具有所需的输出..

所以我的问题是为什么我的分组方法不起作用？我错过了一些明显的角度吗？是不是我必须在返回对象之前对其进行深层复制，如果是，请解释一下？

  <div ng-controller="myController">
    <h2> Using Lodash </h2>
    <ul ng-repeat="(yob, students) in myModel.studentsByYobLodash">
      <h3>{{ yob }}</h3>
      <div ng-repeat="s in students">
        <p> {{s.name}} </p>
      </div>
    </ul> 

    <h2>Not using Lodash </h2>
    <ul ng-repeat="(yob, students) in myModel.studentsByYob">
      <h3>{{ yob }}</h3>
      <div ng-repeat="s in students">
        <p> {{s.name}} </p>
      </div>
    </ul> 
  </div>

脚本

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

app.factory('studentsFactory', [function () {
  var students = [{
    name: 'Tony',
    yob: '1987'
  },{
    name: 'Rachel',
    yob: '1988'
  }, {
    name: 'Eric',
    yob: '1988'
  }, {
    name: 'Jon',
    yob: '1988'
  }, {
    name: 'Tim',
    yob: '1989'
  }, {
    name: 'Bing',
    yob: '1987'
  }, {
    name: 'Valerie',
    yob: '1988'
  }, {
    name: 'Brandon',
    yob: '1987'
  }, {
    name: 'Sam',
    yob: '1987'
  }]

  return {
    getStudents: function () {
      return students;
    }
  }
}])

app.controller('myController', ['$scope', 'studentsFactory', function ($scope, studentsFactory) {
  $scope.myModel = [];
  $scope.myModel.students = studentsFactory.getStudents();

  $scope.myModel.studentsByYobLodash = studentsByYearUsingLodash($scope.myModel.students)
  $scope.myModel.studentsByYob = studentsByYear($scope.myModel.students);

  function studentsByYearUsingLodash (students) {
    return _.groupBy(students, 'yob');
  }

  function studentsByYear(students) {
    var arr = [];
    angular.forEach(students, function (student) {
      var key = student.yob;
      _.has(arr, key) ? arr[key].push(student) : (arr[key] = [student]);
    })

    return arr;
  }
}])
4

2 回答 2

2

使用您key, value在 ng-repeat 中与对象迭代一起使用的结构。因此，通过myModel.studentsByYob作为数组发送最终将返回一个带有孔的数组，因为您最终将拥有例如 myModel.studentsByYob[0..] 未定义，因为它们不存在，而数组对象具有属性 1987, 1988 etc指向学生数组，如果您检查浏览器控制台，您将看到ng-repeat代码指出的完全相同的错误，因为返回了多个未定义的键。所以只需改变：

var arr = [];

到

var arr = {};

Plunkr

于 2014-01-21T01:10:32.200 回答
1

问题是当您创建arrin 时studentsByYear()：

var arr = [];

应该 

var arr = {};

Angular 迭代器对数组和对象的处理方式不同，因此在对非零索引数组进行迭代时，使用 (key, value) 将始终导致未设置的键。由于 Angular 认为undefined == undefined，它会导致重复键错误。

顺便说一句：理论上你可以完全摆脱这个错误一次，所以如果你的 yob 是：

[1, 2, 3, 4...] instead of [1987, ...]

你不会有错误，只是列表顶部有一个空的“0”。

http://plnkr.co/edit/VPiJSjOqPNFeunc7LUqJ?p=preview

但是一旦你有 2 个无序索引

[2, 3, 4...] // 0 and 1 are missing

那么您将再次收到错误，因为0 == undefinedand 1 == undefined，因此0 == 1and 它是重复错误。

于 2014-01-21T01:10:03.770 回答