Masalah:
Dalam AngularJS, senarai kotak pilihan dibentangkan dan objektifnya adalah untuk mewujudkan pengikatan antara mereka dan senarai dalam pengawal. Setiap kotak pilihan yang ditandai menunjukkan kemasukan nilai yang berkaitan dalam senarai.
Penyelesaian:
AngularJS menyediakan dua penyelesaian yang berdaya maju untuk masalah ini:
< ;h3>1. Tatasusunan Mudah sebagai Data Input
Dalam pendekatan ini, struktur HTML meniru senarai kotak semak:
<label ng-repeat="fruitName in fruits"> <input type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-checked="selection.indexOf(fruitName) > -1" ng-click="toggleSelection(fruitName)" > {{fruitName}} </label>
Kod pengawal yang disertakan mengendalikan interaksi:
app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) { // Fruits $scope.fruits = ['apple', 'orange', 'pear', 'naartjie']; // Selected fruits $scope.selection = ['apple', 'pear']; // Toggle selection for a given fruit by name $scope.toggleSelection = function toggleSelection(fruitName) { var idx = $scope.selection.indexOf(fruitName); if (idx > -1) { $scope.selection.splice(idx, 1); } else { $scope.selection.push(fruitName); } }; }]);
Menggunakan tatasusunan objek sebagai data input menambah kerumitan tambahan tetapi memudahkan operasi sisipan dan pemadaman:
<label ng-repeat="fruit in fruits"> <input type="checkbox" name="selectedFruits[]" value="{{fruit.name}}" ng-model="fruit.selected" > {{fruit.name}} </label>
Kod pengawal mencerminkan perubahan:
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 method to get selected fruits $scope.selectedFruits = function selectedFruits() { return filterFilter($scope.fruits, { selected: true }); }; $scope.$watch('fruits|filter:{selected:true}', function (nv) { $scope.selection = nv.map(function (fruit) { return fruit.name; }); }, true); }]);
Kelebihan dan Kelemahan:
Simple Array:
Susun Objek:
Demo: http://jsbin.com/ImAqUC/1/
Atas ialah kandungan terperinci Bagaimana untuk Mengikat Kotak Semak AngularJS ke Senarai Nilai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!