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:
[&]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:
Operaciones
html:
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
More complex data structureCumbersome toggling by nombre
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