1

これがサンプルプランカーです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;
  }
}])
4

2 に答える 2