Question

我创建了数组列表并将其列为多个复选框。从那个，如果我选择我存储到数组变量，如果我取消选中它需要从数组中删除。我试过这是有效的，但取消检查值不是从数组变量中删除。

以下是我的代码jsfiddle

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <lable ng-repeat="list in lists">
    <input type="checkbox" name="chk[]" ng-model="lst" value="{{list.vl}}" ng-change="change()">
    {{list.vl}} <br>
    </lable>
</div>

SCRIPT

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope){
    $scope.lists = [
        {'vl' : 1},
        {'vl' : 2},
        {'vl' : 3},
        {'vl' : 4},
        {'vl' : 5},
    ];

    $scope.lst = [];
    $scope.change = function(){
        $scope.lst.push('2');
        console.log($scope.lst);
    };
});

Answer 1

您可以传递ngChange中需要决定是否要推送或拼接的数据。

HTML

<lable ng-repeat="list in lists">
    <input type="checkbox" ng-model="active" ng-change="change(list, active)" >
</lable>

SCRIPT

$scope.change = function(list, active){
    if (active)
        $scope.lst.push(list);
    else
        $scope.lst.splice($scope.lst.indexOf(list), 1);
};

请注意，每个项目的当前值都存储在隔离范围的变量active中。如果您需要模型中的值，那么只需绑定：

<lable ng-repeat="list in lists">
    <input type="checkbox" ng-model="list.active" ng-change="change(list, active)" >
</lable>

https://jsfiddle.net/ruzw4Lfb/8/

Answer 2

使用数组的推送和弹出

当change（）首先发送两个值时，它选择由ng-model提供，第二个是你要推送或切片（删除）的值。

<input type="checkbox" name="chk[]" ng-model="lst" value="{{list.vl}}" ng-change="change(lst,list.vl)">

$scope.change = function(check,value){
        if(check){
            $scope.lst.push(value);
        }else{
             $scope.lst.splice($scope.lst.indexOf(value), 1);
        }
    };

<强> Fiddle

希望有所帮助：）

Answer 3

我还以不同的方式为您的问题创建了一个解决方案。我做的比你的简单。这可能对你有所帮助。请查看以下示例代码：

<强> app.js

var myApp = angular.module('myApp', []);

    myApp.controller('MyCtrl', function($scope){
        $scope.lists = [
            {'vl' : 1, 'state' : false},
            {'vl' : 2, 'state' : false},
            {'vl' : 3, 'state' : false},
            {'vl' : 4, 'state' : false},
            {'vl' : 5, 'state' : false}
        ];

        $scope.change = function(id){
            $scope.lists[id].state = !$scope.lists[id].state;
            console.log($scope.lists);
        };
    });

<强>的index.html

<div ng-app="myApp" ng-controller="MyCtrl">
    <lable ng-repeat="list in lists">
    <input type="checkbox" value="{{list.vl}}" ng-click="change($index)">
    {{list.vl}} <br>
    </lable>
</div>

Answer 4

首先我假设你的列表的synthax是不正确的，因为你应该有列表 s ：

 $scope.lists = [
            {'vl' : 1},
            {'vl' : 2},
            {'vl' : 3},
            {'vl' : 4},
            {'vl' : 5},
        ];

然后，这是不必要的：$scope.lst = {};，因为您可以影响列表中每个项目的模型，如：

 <input type="checkbox" name="chk[]" ng-model="item.lst" value="{{list.vl}}" ng-change="change()">

注意将更新yout列表模型的Item.lst。

经过几次改变后，您将拥有：

 $scope.lists = [
                {'vl' : 1, 'lst' : value},
                {'vl' : 2, 'lst' : value},
                {'vl' : 3, 'lst' : value},
                {'vl' : 4, 'lst' : value},
                {'vl' : 5, 'lst' : value},
            ];

如何获取复选框值并将其存储在angularjs中？

4 个答案: