如何在Angular中通过ng-model获取所有选中的复选框值？答案

【问题标题】：How to get all checked checkboxes value by ng-model in Angular?如何在Angular中通过ng-model获取所有选中的复选框值？
【发布时间】：2015-10-29 06:03:33
【问题描述】：

这里是jsfiddle。 HTML：

<div ng-app="app">
    <div ng-controller="ctrl">
        <div ng-repeat="item in list">
            <div mycb group="{{item.group}}" title="{{item.title}}" is-checked="item.isChecked" value="{{item.value}}" update="callMe()"></div>
        </div>
        <p>{{result}}</p>
    </div>
</div>

JS：

angular.module("app",[])
.controller("ctrl", ["$scope", function($scope){
    $scope.list = [
        { group: "pet", title: "dog", isChecked: true, value: "dog" },
        { group: "pet", title: "cat", isChecked: true, value: "cat" },
        { group: "pet", title: "bird", isChecked: true, value: "bird" },
        { group: "pet", title: "snake", isChecked: true, value: "snake" },
        { group: "pet", title: "boy", isChecked: true, value: "boy" },
        { group: "pet", title: "cup", isChecked: true, value: "cup" }
    ];
    $scope.callMe = function(){
        var collection = [];
        for(var i=0;i<$scope.list.length;i++){
            var isChecked = $scope.list[i].isChecked;
            if(isChecked){
                collection.push($scope.list[i].value);
            }
        }
        $scope.result = collection.join(" ");
    }
}])
.directive("mycb", function(){
    return{
        restrict: "A",
        scope: {
            title: "@",
            isChecked: "=",
            group: "@",
            value: "@",
            update: "&"
        },
        template: "<input type='checkbox' ng-model='isChecked' name='{{group}}' value='value' ng-change='update()'>{{title}}"
    };
})

我创建了一组复选框，每个复选框被点击时都会更新。
默认情况下，所有复选框都被选中。当我单击第一个时，它将变为未选中状态。其他复选框的值将显示出来。

例如：

狗，猫，鸟，蛇，男孩，杯子
当我点击狗时，狗的复选框将变为未选中，并显示“猫，鸟，蛇，男孩，杯子”。事实上，事情不是这样发生的。它显示“狗、猫、鸟、蛇、男孩、杯子”。
请检查一下并帮我一把。非常感谢！

【问题讨论】：

标签： angularjs angularjs-directive angular-ngmodel

【解决方案1】：

您可以使用数组来跟踪选中的框。

       $scope.selectedCheckboxes = [];
       $scope.callMe=function(item){
          var idx = $scope.selectedCheckboxes.indexOf(item);

          // is currently selected
          if (idx > -1) {
                 $scope.selectedCheckboxes.splice(idx, 1);
          }

          // is newly selected
          else {
                 $scope.selectedCheckboxes.push(item);
          }
   };

并在 html 中将 item.value 传递给 callMe 函数。您将拥有在 $scope.selectedCheckboxes 中检查的所有值

 <div ng-repeat="item in list">
          <div mycb group="{{item.group}}" title="{{item.title}}" is-checked="item.isChecked" value="{{item.value}}" update="callMe(item.value)"></div>
    </div>

【讨论】：

【解决方案2】：

HTML

<div ng-repeat="item in list">
   <div mycb group="{{item.group}}" title="{{item.title}}" is-checked="item.isChecked" value="{{item.value}}" ng-change="callMe()"></div>
</div>

使用 ng-change 事件。用户单击复选框时调用的 Call Me 函数。您可以轻松跟踪控制器中所有选中的复选框。

如果您需要更多帮助，请告诉我。谢谢。

【讨论】：