Question

我有类别/团队的项目列表（比如足球运动员）：

$scope.players = [
  {"name": "Messi", "team": "FCBarcelona"},
  {"name": "Neymar", "team": "FCBarcelona"},
  {"name": "Ibrahimovic", "team": "ManchesterUnited"},
  {"name": "Schweinsteiger", "team": "ManchesterUnited"},
  {"name": "Lewandowski", "team": "BayernMunich"},
  {"name": "Suarez", "team": "FCBarcelona"},
  {"name": "Ribery", "team": "BayernMunich"},
  {"name": "Martial", "team": "ManchesterUnited"},
  {"name": "Lahm", "team": "BayernMunich"}
]

我想要一个由他们的团队分类的玩家的嵌套复选框列表：

我试过了：

<ion-list>
  <ion-checkbox ng-repeat="(team, value) in players | groupBy: 'team'"
                ng-model="data.teams[team]">
  <span>{{team}}</span>
  <ion-checkbox ng-repeat="player in value" ng-model="data.players[team][player]">
    {{player.name}}
  </ion-checkbox>
  </ion-checkbox>
</ion-list>

这给了我一个嵌套的复选框，只有team能够被检查。

组织ng-model的更好方法将受到高度赞赏。

一个很好的补充是通过检查团队名称来选择/切换特定团队的所有玩家。

Answer 1

您可以尝试这样做以正确填充团队成员：

<ion-list>
  <ion-checkbox ng-repeat="(key, value) in players | groupBy: 'team'"
                ng-model="data.teams[key]">
  <span>{{key}}</span>
  <ion-checkbox ng-repeat="player in value" ng-model="data.players[key][player]">
    {{player.name}}
  </ion-checkbox>
  </ion-checkbox>
</ion-list>

浏览此Wiki以更好地理解：angular-filter#groupby

Answer 2

您可以使用角度过滤器并将其注入模块

var carService = angular.module('clubApp', ['ionic','angular.filter'])

<强>样本

＆＃13;

var clubApp = angular.module('clubApp', ['ionic','angular.filter'])
clubApp.controller('ctrlPlayer', ['$scope', function($scope) {
  $scope.players = [{
    "name": "Messi",
    "team": "FCBarcelona"
  }, {
    "name": "Neymar",
    "team": "FCBarcelona"
  }, {
    "name": "Ibrahimovic",
    "team": "ManchesterUnited"
  }, {
    "name": "Schweinsteiger",
    "team": "ManchesterUnited"
  }, {
    "name": "Lewandowski",
    "team": "BayernMunich"
  }, {
    "name": "Suarez",
    "team": "FCBarcelona"
  }, {
    "name": "Ribery",
    "team": "BayernMunich"
  }, {
    "name": "Martial",
    "team": "ManchesterUnited"
  }, {
    "name": "Lahm",
    "team": "BayernMunich"
  }]
 

}]);

＆＃13;

<!DOCTYPE html>
<html ng-app='clubApp'>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
  <script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.min.js"></script>

  <script src="script.js"></script>
</head>
<body ng-controller="ctrlPlayer">
 <ion-list>
  <ion-checkbox ng-repeat="(key, value) in players | groupBy: 'team'">
  <span>{{key}}</span>
  <ion-checkbox ng-repeat="player in value" >
    {{player.name}}
  </ion-checkbox>
  </ion-checkbox>
</ion-list>
</body>

</html>

＆＃13;

Ionic中的嵌套复选框项

2 个答案: