Boîtes de cotation des données AngularJS pour objet si elles sont vérifiées

J'ai un objet JSON que je répète avec ng-repeat, les clés sont des chaînes, et les valeurs sont un tableau. Je liste chacune des valeurs comme une case à cocher. Je voudrais créer un deuxième objet qui contient une liste des cases à cocher qui sont cochées. Je souhaite conserver la structure de l'objet avec des clés et des valeurs.

Je ne sais pas comment lier ceci à un modèle correctement afin que la structure soit préservée.

Http://jsfiddle.net/NDFc2/3/

C'est mon HTML

<h3 >Dynamic data binding in AngularJS</h3> <div ng-app ng-controller="Controller" class="container"> <h4>Inputs</h4> <ul ng-repeat="(parent, values) in inputs"> <span>{{parent}} : </span> <li ng-repeat="value in values"><label>{{value}} <input type="checkbox" ng-model="output[parent]" ng-checked="output[parent]" value="value" > </input></label> </li> </ul> <h4>Outputs</h4> <ul ng-repeat="(key,value) in inputs"> <li> {{key}} : {{output[key]}} </li> </ul> </div>

Et mon JS

 function Controller($scope) { $scope.output = {}; $scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']}; }

Existe-t-il un moyen simple de le faire? J'ai le sentiment que je manque quelque chose de mineur et que tout va bien fonctionner.

Mes exemples ont votre logique angulaire dans la syntaxe recommandée (non globale). Il y a eu plusieurs problèmes avec votre balisage que j'ai corrigé.

Dans cet exemple, ng-model="x" est un espace réservé que je n'utilise pas, mais ng-model doit être présent ou une erreur est lancée. J'utilise ng-change pour gérer le lien entre les cases à cocher et $scope.outputs .

Démo en direct ici (cliquez).

Marquage:

 <div ng-app="myApp" ng-controller="myCtrl"> <h3 >Dynamic data binding AngularJS</h3> <h4>Inputs</h4> <ul> <li ng-repeat="(typeKey, typeVal) in inputs"> <span>{{typeKey}} : </span> <ul> <li ng-repeat="value in typeVal"> <label>{{value}} <input type="checkbox" ng-model="x" ng-change="setOutput(typeKey, $index, value)" > </label> </li> </ul> </li> </ul> <h4>Outputs</h4> <ul ng-repeat="(key,value) in inputs"> <li>{{key}} : {{outputs[key]}}</li> </ul> </div>

JavaScript:

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.outputs = {}; $scope.inputs = { 'category': ['one','two','three'], 'color':['blue','green'] }; $scope.setOutput = function(typeKey, $index, value) { $scope.outputs[typeKey] = $scope.outputs[typeKey] || []; $scope.outputs[typeKey][$index] = value; }; });

Une autre solution

Démo en direct ici (cliquez).

Tout d'abord, j'ai utilisé ng-init pour ajouter dynamiquement les propriétés de premier niveau des inputs aux outputs . Ensuite, il vous fallait simplement définir vos propriétés ng-model et ng-checked dans l'emplacement correct des outputs .

Marquage:

 <div ng-app="myApp" ng-controller="myCtrl"> <h3 >Dynamic data binding AngularJS</h3> <h4>Inputs</h4> <ul> <li ng-repeat="(typeKey, typeVal) in inputs" ng-init="outputs[typeKey] = outputs[typeKey] || {}"> <span>{{typeKey}} : </span> <ul> <li ng-repeat="value in typeVal"> <label>{{value}} <input type="checkbox" ng-model="outputs[typeKey][value]" ng-checked="outputs[typeKey][value]" value="outputs[typeKey][value]" > </label> </li> </ul> </li> </ul> <h4>Outputs</h4> <ul ng-repeat="(key,value) in inputs"> <li>{{key}} : {{outputs[key]}}</li> </ul> </div>

JavaScript:

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.outputs = {}; $scope.inputs = { 'category': ['one','two','three'], 'color':['blue','green'] }; });

Vous devez lier à la valeur pour le parent, car les cases ne fonctionnent pas comme ça. Voici un exemple:

 <h3 >Dynamic data binding in AngularJS</h3> <div ng-app ng-controller="Controller" class="container"> <h4>Inputs</h4> <ul ng-repeat="(parent, values) in inputs"> <span>{{parent}} : </span> <li ng-repeat="value in values"><label>{{value}} <input type="checkbox" ng-model="output[parent][value]" ng+checked="output[parent][value]" value="value" > </input></label> </li> </ul> <h4>Outputs</h4> <ul ng-repeat="(key,value) in inputs"> <li> {{key}} : {{output[key]}} </li> </ul> </div>

Et dans le contrôleur, créez les clés au préalable

 function Controller($scope) { $scope.output = { 'category': {}, color: {} }; $scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']}; }

Jsfiddle : http://jsfiddle.net/5eeVc/

Jetez un oeil à ce plunk, j'ai manipulé deux scénarios différents. Partage-le simplement comme un article de connaissances

Plunk

  <h3>First Scenario <small>Handling JSON source </small></h3> <div class="container-fluid"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <h4>Available options</h4> <div ng-repeat="item in itemList"> <mark>{{item.name}}</mark> <input type="checkbox" ng-model="modelContainer[$index].checked" /> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <h4 class="text-success">Selected options</h4> <ul> <li ng-repeat="item in modelContainer | filter: {checked:true}"> {{item.item.name}} <a href="#" class="cl" ng-click="uncheck(item.item.id)">X</a> </li> </ul> </div> </div> </div> <br> <p class="text-danger">itemList</p> <code>{{itemList}}</code> <br> <br> <p class="text-danger">modelContainer</p> <code>{{modelContainer}}</code> <hr> <h3>Second Scenario <small>Handling map Source </small></h3> <div class="container-fluid"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <h4>Available options</h4> <div ng-repeat="item in Maplist"> <mark>{{item}}</mark> <input type="checkbox" ng-model="modelContainer1[$index].checked" /> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <h4 class="text-success">Selected options</h4> <ul> <li ng-repeat="item in modelContainer1 | filter: {checked:true}"> {{item.name}} <a href="#" class="cl" ng-click="uncheck1(item.id)">X</a> </li>`enter code here` </ul> </div> </div> </div>