AngularJS : liste bağlamak için Nasıl checkbox değerleri?
Birkaç onay kutularını var:
<input type='checkbox' value="apple" checked>
<input type='checkbox' value="orange">
<input type='checkbox' value="pear" checked>
<input type='checkbox' value="naartjie">
Bir onay kutusu değiştiğinde bu benim denetleyicisi içinde bir listesi bağlamak istiyorum denetleyicisi örneğin ['apple', 'pear']
tüm kontrol değerlerinin bir listesini tutar.
ng-model sadece denetleyici bir değişken için tek bir onay kutusu değeri bağlamak mümkün gibi görünüyor.
Bu contrller bir listesi için dört kutularını bağlamak böylece bunu yapmak için başka bir yol var mı?
CEVAP
Bu sorunu yaklaşım için iki yol vardır. Ya da basit bir dizi ya da nesnelerin bir dizi kullanın. Her çözüm artıları ve eksileri vardır. Her durum için bir tane bulacaksınız aşağıda.
Giriş verisi olarak basit bir dizi ile
html gibi görünebilir:
<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>
ve uygun denetleyici kod şöyle olacaktır:
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);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(fruitName);
}
};
}]);
Artılarıbasit veri yapısı ve Adı geçmek kolay
İnş: Ekle/Kaldır iki liste olarak hantal (giriş seçimi) yönetilmesi gerekiyor
Giriş verisi olarak nesne bir dizi ile
html gibi görünebilir:
<label ng-repeat="fruit in fruits">
<!--
- use `value="{{fruit.name}}"` to give the input a real value, in case the form gets submitted
traditionally
- use `ng-checked="fruit.selected"` to have the checkbox checked based on some angular expression
(no two-way-data-binding)
- use `ng-model="fruit.selected"` to utilize two-way-data-binding. Note that `.selected`
is arbitrary. The property name could be anything and will be created on the object if not present.
-->
<input
type="checkbox"
name="selectedFruits[]"
value="{{fruit.name}}"
ng-model="fruit.selected"
> {{fruit.name}}
</label>
ve uygun denetleyici kod şöyle olacaktır:
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 });
};
// watch fruits for changes
$scope.$watch('fruits|filter:{selected:true}', function (nv) {
$scope.selection = nv.map(function (fruit) {
return fruit.name;
});
}, true);
}]);
Artıları: Ekle/Kaldır çok kolay
İnş: ada göre biraz daha karmaşık veri yapısı ve geçmek hantal ya da yardımcı bir yöntem gerektirir
nasıl bir combobox için bir liste bağl...
Nasıl bir etiket adı özniteliği bağlam...
Nasıl bir liste ve değerleri anahtarla...
Nasıl bir liste boyutunu almak için...
Java nasıl yeni bir Liste yapmak için...