Question

J开始学习Angular，我在获取复选框的价值方面遇到了麻烦。

<label ng-repeat="role in groupsapp">
<input type="checkbox" ng-click="selectedRole([role.name,role.id,????])">{{role.name}}</label>

如何在适当的位置检查/取消检查值＆＃34; ???＆＃34; 我发现了：

ng-true-value="{{role.id}}_{{role.name}}_true"
ng-false-value="{{role.id}}_{{role.name}}_false"

但我不知道如何获得此复选框的价值，任何人都可以提供帮助？

Answer 1

要使用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>

Answer 2

我想你可能已经得到了你的答案，但如果以后如果你想要使用多个复选框并且需要收集所有收集的内容你可以使用自定义指令，那么仍然如此。这里是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);
        }

    };

}]);

如何获得chcecked复选框的值 - angularJS

2 个答案: