如何获取选中复选框的值- angularJS
如何获取选中复选框的值- angularJS
提问于 2016-10-27 06:36:59
J开始学习Angular，而我在获取复选框的值时遇到了麻烦。
<label ng-repeat="role in groupsapp">
<input type="checkbox" ng-click="selectedRole([role.name,role.id,????])">{{role.name}}</label>如何就地选中/取消选中值“？”我还发现：
ng-true-value="{{role.id}}_{{role.name}}_true"
ng-false-value="{{role.id}}_{{role.name}}_false"但是我不知道如何获得复选框的这个值，有谁可以帮助我吗？
回答 2
Stack Overflow用户
发布于 2016-10-27 07:22:18
要让它与angular一起工作，您需要将ng-model指令添加到您的输入中，以便angular能够处理它。
<label ng-repeat="role in groupsapp">
<input ng-model="role.value" type="checkbox" ng-click="selectedRole([role.name,role.id,role.value])">{{role.name}}
</label>Stack Overflow用户
发布于 2016-10-27 22:07:20
我猜你可能已经得到了答案，但是如果将来你想要使用多个复选框，并且需要收集收集到的所有项，你可以使用一个自定义的directive.Here是一个关于如何使用它的link。
以下是HTML格式的示例代码片段
<body ng-app="mainApp" ng-controller="MainCtrl">
<h1>Multi Check box</h1>
<multi-checkbox selectedlist="req.selectedList" orginallist="req.sourceList" value="code" label="desc" all="true" sort-by="desc"></multi-checkbox>
<pre ng-cloak>{{req.selectedList |json}}</pre>
</body>这需要一个源列表(orginallist)和一个目标列表(selectedlist)，其中应该放置所选值，它还根据您的需要对列表进行排序。
只需在JS文件中添加此指令
mainApp.directive('multiCheckbox', ['$log', '$filter', '$timeout', function($log, $filter, $timeout) {
return {
restrict: 'EA',//E-element & A - attribute
template:
'<div> <div ng-show="checkbox.showAll" class="checkbox"> ' +
'<label style="font-size: 12px"> <input type="checkbox" ' +
'id="all" name="all" ng-model="checkbox.all" ' +
'ng-checked="checkbox.all" ng-change="selectAll()" /> All ' +
'</label> ' +
'</div>' +
'<div ng-repeat="item in list track by $index "class="checkbox"> ' +
'<label style="font-size: 12px"> <input type="checkbox" ' +
'id="{{item.value}}" name="{{item.label}}" ' +
'ng-checked="item.checked" ng-click="$parent.toggle($index)"/> {{item.label}}' +
'</label>' +
'</div> </div>',
replace: true, //to replace our custom template in place of tag <multi-checkbox>
transclude: false,//make it true if we want to insert anything btw directive tags
scope: { //isolate scope created
selectedlist: '=',
orginallist: '=',
value: '@',
label: '@',
all: '@',
sortBy: '@'
},
link: function($scope, element, attrs) {
$scope.checkbox = {};
$scope.checkbox.all = false; //set 'All' checkbox to false
$scope.checkbox.showAll = $scope.all == 'true' ? true : false;//to show/hide 'All' checkbox
//function called on click of check box
$scope.toggle = function(index) {
var item = $scope.list[index];
var i = $scope.selectedlist.length > 0 ? $scope.selectedlist.indexOf(item.value) : -1;
item.checked = !item.checked;
if (!item.checked) {
$scope.selectedlist.splice(i, 1);//remove item if unchecked
$scope.checkbox.all = false;//make 'All' to uncheck too
} else if (item.checked) {
$scope.selectedlist.push(item.value);//add item if checked
}
};
//function called when 'All' checkbox is checked
$scope.selectAll = function() {
var totalList = $scope.list;
$scope.selectedlist = [];
//if selected add all items
//if unchecked remove all items from selected list
angular.forEach(totalList, function(item) {
item.checked = $scope.checkbox.all;
if (item.checked) {
$scope.selectedlist.push(item.value);
} else {
$scope.selectedlist = [];
}
});
};
//always watch my source list if it has been modified and update back..
$scope.$watch('orginallist', function(value) {
//sort accordingly..
value = $filter('orderBy')(value, $scope.sortBy);
$scope.list = [];
if (angular.isArray(value)) {
angular.forEach(value, function(item) {
$scope.list.push({
value: item[$scope.value],
label: item[$scope.label],
checked: item.checked
});
});
}
}, true);
//clear 'All' checkbox value if all items are de selected
$scope.$watch('selectedlist', function(value) {
if (!angular.isArray(value) || (angular.isArray(value) && value.length <= 0)) {
$scope.checkbox.all = false;
}
}, true);
}
};
}]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40273217
复制相关文章
相似问题
腾讯云开发者
