Как привязать к списку значений флага в Angularjs?

введение

] При работе с набором флажков, это может иметь решающее значение для привязки их значений с списком в списке в контроллере для эффективного управления. Тем не менее, свойство NG-модели AngularJS, по-видимому, ограничено привязкой одного значения флага. В этой статье исследуется два подхода к решению этой проблемы, используя либо простой массив, либо массив объектов в качестве входных данных.

подход 1: простой массив

html:

   {{fruitName}}

. -1" ng-click = "toggleSelection (FruitName)" > {{FruitName}}

controller:

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {

  // Fruits
  $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];

  // Selected fruits
  $scope.selection = ['apple', 'pear'];

  // Toggle selection
  $scope.toggleSelection = function toggleSelection(fruitName) {
    var idx = $scope.selection.indexOf(fruitName);

    if (idx > -1) {
      $scope.selection.splice(idx, 1);
    } else {
      $scope.selection.push(fruitName);
    }
  };
}]);

app.controller ('somplearrayctrl', ['$ scope', function somplearrayctrl ($ scope) { // фрукты $ scope.fruits = ['Apple', 'Orange', 'Pear', 'naartjie']; // Выбранные фрукты $ scope.selection = ['Apple', 'pear']; // Выбор переключения $ scope.toggleselection = function toggleSelection (FruitName) { var idx = $ scope.selection.indexof (fruitname); if (idx> -1) { $ scope.selection.splice (idx, 1); } еще { $ scope.selection.push (fruitname); } }; }]);

pros:

простая структура данных
простой переключатель по имени

cons:

rept 2: object array

html:

{{fruit.name}}

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {

  // Fruits
  $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];

  // Selected fruits
  $scope.selection = ['apple', 'pear'];

  // Toggle selection
  $scope.toggleSelection = function toggleSelection(fruitName) {
    var idx = $scope.selection.indexOf(fruitName);

    if (idx > -1) {
      $scope.selection.splice(idx, 1);
    } else {
      $scope.selection.push(fruitName);
    }
  };
}]);

]

controller:

app.controller ('objectarrayctrl', ['$ scope', 'filterfilter', functionArrayctrl ($ scope, filterfilter) { // фрукты $ scope.fruits = [ {name: 'Apple', выбрано: true}, {name: 'Orange', выбрано: false}, {name: 'pear', выбрать: true}, {name: 'naartjie', выбрано: false} ]; // Выбранные фрукты $ scope.selection = []; // помощник для выбранных фруктов $ scope.selectedfruits = function selectedFruits () { return filterfilter ($ scope.fruits, {selected: true}); }; // Смотреть фрукты за изменениями $ scope. $ watch ('Fruits | Filter: {selected: true}', function (nv) { $ scope.selection = nv.map (function (fruit) { вернуть Fruit.name; }); }, истинный); }]);

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {

  // Fruits
  $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];

  // Selected fruits
  $scope.selection = ['apple', 'pear'];

  // Toggle selection
  $scope.toggleSelection = function toggleSelection(fruitName) {
    var idx = $scope.selection.indexOf(fruitName);

    if (idx > -1) {
      $scope.selection.splice(idx, 1);
    } else {
      $scope.selection.push(fruitName);
    }
  };
}]);

pros:

easy add/удалить операции

cons:

более сложная структура данных
demo:

http://jsbin.com/imaquc/1/t