我有一些复选框:
<input type='checkbox' value="apple" checked>
<input type='checkbox' value="orange">
<input type='checkbox' value="pear" checked>
<input type='checkbox' value="naartjie">
我想绑定到我的控制器中的一个列表，这样每当一个复选框被更改时，控制器就会维护一个包含所有选中值的列表，例如，['apple'， 'pear']。
Ng-model似乎只能将一个复选框的值绑定到控制器中的一个变量。
是否有其他方法可以将这四个复选框绑定到控制器中的列表?
当前回答
在HTML中(假设复选框位于表中每一行的第一列)。
<tr ng-repeat="item in fruits">
<td><input type="checkbox" ng-model="item.checked" ng-click="getChecked(item)"></td>
<td ng-bind="fruit.name"></td>
<td ng-bind="fruit.color"></td>
...
</tr>
在controllers.js文件:
// The data initialization part...
$scope.fruits = [
{
name: ....,
color:....
},
{
name: ....,
color:....
}
...
];
// The checked or not data is stored in the object array elements themselves
$scope.fruits.forEach(function(item){
item.checked = false;
});
// The array to store checked fruit items
$scope.checkedItems = [];
// Every click on any checkbox will trigger the filter to find checked items
$scope.getChecked = function(item){
$scope.checkedItems = $filter("filter")($scope.fruits,{checked:true});
};
其他回答
我认为最简单的解决方法是使用'select'并指定'multiple':
<select ng-model="selectedfruit" multiple ng-options="v for v in fruit"></select>
否则，我认为您将不得不处理该列表来构造该列表 (通过$watch()用复选框绑定模型数组)。
你不需要编写所有的代码。AngularJS会通过使用ngTrueValue和ngFalseValue来使模型和复选框保持同步
代码在这里:http://codepen.io/paulbhartzog/pen/kBhzn
代码片段:
<p ng-repeat="item in list1" class="item" id="{{item.id}}">
<strong>{{item.id}}</strong> <input name='obj1_data' type="checkbox" ng-model="list1[$index].data" ng-true-value="1" ng-false-value="0"> Click this to change data value below
</p>
<pre>{{list1 | json}}</pre>
试试我的宝贝:
**
myApp.filter('inputSelected', function(){
return function(formData){
var keyArr = [];
var word = [];
Object.keys(formData).forEach(function(key){
if (formData[key]){
var keyCap = key.charAt(0).toUpperCase() + key.slice(1);
for (var char = 0; char<keyCap.length; char++ ) {
if (keyCap[char] == keyCap[char].toUpperCase()){
var spacedLetter = ' '+ keyCap[char];
word.push(spacedLetter);
}
else {
word.push(keyCap[char]);
}
}
}
keyArr.push(word.join(''))
word = [];
})
return keyArr.toString();
}
})
**
然后对于任何带有复选框的ng-model，它将返回你选择的所有输入的字符串:
<label for="Heard about ITN">How did you hear about ITN?: *</label><br>
<label class="checkbox-inline"><input ng-model="formData.heardAboutItn.brotherOrSister" type="checkbox" >Brother or Sister</label>
<label class="checkbox-inline"><input ng-model="formData.heardAboutItn.friendOrAcquaintance" type="checkbox" >Friend or Acquaintance</label>
{{formData.heardAboutItn | inputSelected }}
//returns Brother or Sister, Friend or Acquaintance
灵感来自Yoshi上面的帖子。 这是钱。
(function () { angular .module("APP", []) .controller("demoCtrl", ["$scope", function ($scope) { var dc = this dc.list = [ "Selection1", "Selection2", "Selection3" ] dc.multipleSelections = [] dc.individualSelections = [] // Using splice and push methods to make use of // the same "selections" object passed by reference to the // addOrRemove function as using "selections = []" // creates a new object within the scope of the // function which doesn't help in two way binding. dc.addOrRemove = function (selectedItems, item, isMultiple) { var itemIndex = selectedItems.indexOf(item) var isPresent = (itemIndex > -1) if (isMultiple) { if (isPresent) { selectedItems.splice(itemIndex, 1) } else { selectedItems.push(item) } } else { if (isPresent) { selectedItems.splice(0, 1) } else { selectedItems.splice(0, 1, item) } } } }]) })() label { display: block; } <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body ng-app="APP" ng-controller="demoCtrl as dc"> <h1>checkbox-select demo</h1> <h4>Multiple Selections</h4> <label ng-repeat="thing in dc.list"> <input type="checkbox" ng-checked="dc.multipleSelections.indexOf(thing) > -1" ng-click="dc.addOrRemove(dc.multipleSelections, thing, true)" > {{thing}} </label> <p> dc.multipleSelections :- {{dc.multipleSelections}} </p> <hr> <h4>Individual Selections</h4> <label ng-repeat="thing in dc.list"> <input type="checkbox" ng-checked="dc.individualSelections.indexOf(thing) > -1" ng-click="dc.addOrRemove(dc.individualSelections, thing, false)" > {{thing}} </label> <p> dc.invidualSelections :- {{dc.individualSelections}} </p> <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script> <script src="script.js"></script> </body> </html>
我喜欢Yoshi的回答。我增强了它，所以你可以对多个列表使用相同的函数。
<label ng-repeat="fruitName in fruits">
<input
type="checkbox"
name="selectedFruits[]"
value="{{fruitName}}"
ng-checked="selection.indexOf(fruitName) > -1"
ng-click="toggleSelection(fruitName, selection)"> {{fruitName}}
</label>
<label ng-repeat="veggieName in veggies">
<input
type="checkbox"
name="selectedVeggies[]"
value="{{veggieName}}"
ng-checked="veggieSelection.indexOf(veggieName) > -1"
ng-click="toggleSelection(veggieName, veggieSelection)"> {{veggieName}}
</label>
app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
// fruits
$scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];
$scope.veggies = ['lettuce', 'cabbage', 'tomato']
// selected fruits
$scope.selection = ['apple', 'pear'];
$scope.veggieSelection = ['lettuce']
// toggle selection for a given fruit by name
$scope.toggleSelection = function toggleSelection(selectionName, listSelection) {
var idx = listSelection.indexOf(selectionName);
// is currently selected
if (idx > -1) {
listSelection.splice(idx, 1);
}
// is newly selected
else {
listSelection.push(selectionName);
}
};
}]);
http://plnkr.co/edit/KcbtzEyNMA8s1X7Hja8p?p=preview
