これがサンプルプランカーですhttp://embed.plnkr.co/bJFmT0WlRfqUgrCxZRT6
まず、特定のキーでコレクションをグループ化しています - 私の例のyobでは。
私には2つの選択肢があります -
- 仕事をするカスタム関数を書くことができます(カスタムロジックを追加できるので、やりたいです)
- 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;
}
}])