Como ligar a uma lista de valores da caixa de seleção em Angularjs?

Introdução

Ao lidar com um conjunto de caixas de seleção, pode ser crucial para vincular seus valores a uma lista de uma lista. No entanto, a propriedade NG-Model do AngularJS parece ser limitada a vincular um valor de uma única caixa de seleção. Este artigo explora duas abordagens para resolver esse problema, aproveitando uma matriz simples ou uma matriz de objetos como dados de entrada. -1" ng-click = "ToggleSelection (nome da fruta)" > {{fruitname}}

controlador:

app.controller ('simplairrayctrl', ['$ scope', function simplyArrayCtrl ($ scope) { // frutas $ scope.Fruits = ['Apple', 'Orange', 'Pear', 'Naartjie']; // frutos selecionados $ scope.selection = ['Apple', 'Pear']; // seleção de alternância $ scope.togGleSelection = função ToggleSelection (FruitName) { var idx = $ scope.Selection.IndexOF (FruitName); if (idx> -1) { $ scope.selection.splice (IDX, 1); } outro { $ SCOPE.SELECTION.PUSH (FruitName); } }; }]);

pros:

   {{fruitName}}

estrutura de dados simples

alternando por nome

   {{fruitName}}

Operações

abordagem 2: objeto Array
html:

{{fruit.name}}

controlador:

app.controller ('objectArrayCtrl', ['$ scope', 'filterfilter', function objecjectArrayCtrl ($ scope, filtrofilter), { // frutas $ scope.fruits = [ {nome: 'Apple', selecionado: true}, {Nome: 'Orange', selecionado: false}, {Nome: 'Pear', selecionado: true}, {nome: 'Naartjie', selecionado: false} ]; // frutos selecionados $ SCOPE.SELECTION = []; // auxiliar para frutas selecionadas $ scope.SelectedFruits = function SelectedFruits () { retornar filterfilter ($ scope.fruits, {selecionado: true}); }; // Assista frutas para alterações $ scope. $ watch ('frutas | filtro: {selecionado: true}', function (nv) { $ SCOPE.SELECTION = NV.MAP (função (Fruit) { retornar frut.name; }); }, verdadeiro); }]);

pros:

easy Add/Remow Operations

   {{fruitName}}

contras: Name

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

  // Fruits
  $scope.fruits = [
    { name: 'apple',    selected: true },
    { name: 'orange',   selected: false },
    { name: 'pear',     selected: true },
    { name: 'naartjie', selected: false }
  ];

  // Selected fruits
  $scope.selection = [];

  // Helper for selected fruits
  $scope.selectedFruits = function selectedFruits() {
    return filterFilter($scope.fruits, { selected: true });
  };

  // Watch fruits for changes
  $scope.$watch('fruits|filter:{selected:true}', function (nv) {
    $scope.selection = nv.map(function (fruit) {
      return fruit.name;
    });
  }, true);
}]);

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