Nested Kontrollkästchen Elemente in Ionic

Ich habe eine Liste von Elementen (sagen Fußballer) mit Kategorien/Teams:Nested Kontrollkästchen Elemente in Ionic

$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"} 
]

Ich möchte eine verschachtelte Kontrollkästchen Liste der von ihren Teams kategorisiert Spieler:

ich habe versucht:

<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>

Und das gibt mir eine verschachtelte che ckbox mit nur dem team man kann überprüft werden.

Eine bessere Art, die ng-model zu organisieren, würde sehr geschätzt werden.

Eine großartige Ergänzung wäre es, alle Spieler eines bestimmten Teams auszuwählen/umzuschalten, indem Sie den Namen des Teams überprüfen.

Quelle

2017-01-09 User528491

Sie können dies richtig versuchen, die Spieler eines Teams zu füllen:

<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>

durch dieses Wiki Zum besseren Verständnis: kann Winkel-Filter angular-filter#groupby

Quelle

2017-01-09 07:21:33

Was ist '{{key}}' hier genau? Wenn es der Schlüssel in den Gruppenpaaren ist, die von 'groupBy' generiert werden, verwende ich bereits' (team, value) 'anstelle von' (key, value) 'und zeige es als' {{team}} 'an. – User528491

Sie verwenden und es an das Modul zu injizieren,

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

DEMO

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" 
 
    }] 
 
    
 

 
}]);

<!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>

Quelle

2017-01-09 07:35:59 Sajeetharan

Löst das Problem nicht. Beim Ausführen des Snippets sehe ich immer noch, dass Teams auswählbar sind, während dies bei Spielern nicht der Fall ist – User528491

Nested Kontrollkästchen Elemente in Ionic

Antwort

Verwandte Themen