如何使用AngularJS

时间:2017-08-31 10:14:43

标签: javascript angularjs angular-filters

我有一个具有3个属性名称

的对象数组

1.name 2.team 3,年龄

http://jsfiddle.net/HpTDj/46/

我想要同时兼顾年龄和团队的团队。我在团队中完成了团队工作,但我对如何在当前代码中对团队和年龄进行分组感到困惑。

我需要用团队名称来显示团队的年龄。请建议我该怎么做?

JS:

 $scope.MyList = [
    {name: 'Gene', team: 'alpha', age: 19},
      {name: 'George', team: 'beta', age: 19},
      {name: 'Steve', team: 'gamma', age: 23},
      {name: 'Paula', team: 'beta', age: 23},
      {name: 'Scruath', team: 'gamma', age: 23},
      {name: 'Scruath 1', team: 'gamma', age: 22},
      {name: 'Scruath 2', team: 'gamma', age: 22}
                    ];
    $scope.getGroups = function () {
        var groupArray = [];
        angular.forEach($scope.MyList, function (item, idx) {
            if (groupArray.indexOf(item.team) == -1){ groupArray.push(item.team)
            }
        });
        return groupArray.sort();
    }

HTML:

  <div ng-repeat='group in getGroups()'>
             <h2>{{group}}</h2>
              <ul>
                <li ng-repeat="item in MyList |  groupby:group">{{item.name}}</li>
            </ul>
        </div>

1 个答案:

答案 0 :(得分:0)

你可以这样做

 <ul ng-repeat="(key, value) in MyList | groupBy: '[team,name]'">
 <b>Group name: {{key}}</b>
 <br>
 <li ng-repeat="player in value">
  <b>player:</b> {{ player.name }} 
  <br>
  <b>team:</b> {{player.team}} 
 </li>
</ul>

有关详细信息,您可以see this