"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > AngularJS Multi-Checkbox Value vinculado al método de lista

AngularJS Multi-Checkbox Value vinculado al método de lista

Publicado el 2025-04-14
Navegar:691

How to Bind Multiple Checkbox Values to a List in AngularJS?

cómo vincular a una lista de valores de casilla de verificación en angularjs?

introducción

cuando se trata de un conjunto de casillas de verificación, puede ser crucial para vincular sus valores a una lista en el controlador para un manejo efectivo. Sin embargo, la propiedad NG-Model de AngularJS parece estar limitada a vincular un solo valor de casilla de verificación. Este artículo explora dos enfoques para resolver este problema, aprovechando una matriz simple o una matriz de objetos como datos de entrada.

Afrojar 1: matriz simple

html:

[&] -1" ng-click = "ToggleLelection (Nombre de frutas)" > {{fruitname}}

controlador:

app.controller ('simpleArrayCtrl', ['$ scope', function simplIarRaRyCtrl ($ scope) { // frutas $ scope.fruits = ['manzana', 'naranja', 'pera', 'naartjie']; // frutas seleccionadas $ scope.selection = ['manzana', 'pera']; // selección de alternar $ scope.toGgGleselection = function toggleLelection (frutsname) { var idx = $ scope.selection.IndexOf (frutsname); if (idx> -1) { $ scope.selection.splice (IDX, 1); } demás { $ scope.selection.push (fruitname); } }; }]));

pros:

    Simple Data Structitet
  • Easy Toggling por nombre
Cons:

Operaciones

    acerca 2: array de objetos

html:

{{fruit.name}}

controlador:

app.controller ('objectArrayctrl', ['$ scope', 'filterFilter', function ObjectArrayCtrl ($ Scope, FilterFilter) { // frutas $ scope.fruits = [ {nombre: 'Apple', seleccionado: true}, {nombre: 'naranja', seleccionado: falso}, {nombre: 'pera', seleccionado: true}, {Nombre: 'NaartJie', seleccionado: False} ]; // frutas seleccionadas $ scope.selection = []; // ayudante para frutas seleccionadas $ scope.selectedfruits = function selectedFruits () { return filterFilter ($ scope.fruits, {seleccionado: true}); }; // Mira las frutas para los cambios $ scope. $ watch ('frutas | filtro: {seleccionado: true}', function (nv) { $ scope.selection = nv.map (function (fruit) { devolver frutas.name; }); }, verdadero); }]);

Pros:

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);
}]);

Easy add/remove operations

    Cons:

More complex data structureCumbersome toggling by nombre

  • demo:
  • http://jsbin.com/imaquc/1/§&&&]
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3