javascript 如何在angularjs中的提交功能上获取ng-repeat复选框值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31000636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 13:05:43  来源:igfitidea点击:

how to get ng-repeat checkbox values on submit function in angularjs

javascriptangularjs

提问by its me

I have a form which has 10 checkboxes. By default angular js triggers on individual checkbox. I want to grab all selected check box values on submit action only. Here is my code...

我有一个包含 10 个复选框的表单。默认情况下,angular js 在单个复选框上触发。我只想在提交操作时获取所有选定的复选框值。这是我的代码...

<form name="thisform" novalidate data-ng-submit="booking()">
    <div ng-repeat="item in items" class="standard" flex="50">
        <label>
            <input type="checkbox"  ng-model="typeValues[item._id]" value="{{item._id}}"/>
            {{ item.Service_Categories}}
        </label>
    </div>
    <input type="submit" name="submit" value="submit"/>
</form>


$scope.check= function() { 
    //console.log("a");
    $http.get('XYZ.com').success(function(data, status,response) { 
    $scope.items=data;
});

$scope.booking=function(){
    $scope.typeValues = [];
    console.log($scope.typeValues);
}

I am getting empty array.

我得到空数组。

Can somebody tell how to grab all selected checkbox values only on submit event.

有人可以告诉如何仅在提交事件中获取所有选定的复选框值。

回答by Vijayabaskaran M

<div ng-repeat="item in items">
    <input type="checkbox" ng-model="item.SELECTED"  ng-true-value="Y" ng-false-value="N"/>
</div>
<input type="submit" name="submit" value="submit" ng-click="check(items)"/>

$scope.check= function(data) { 
    var arr = [];
    for(var i in data){
       if(data[i].SELECTED=='Y'){
           arr.push(data[i].id);
       }
    }
    console.log(arr);
    // Do more stuffs here
}

回答by Mike Gledhill

Can I suggest reading the answer I posted yesterday to a similar StackOverflow question..

我可以建议阅读我昨天发布的类似 StackOverflow 问题的答案吗?

AngularJS with checkboxes

带有复选框的 AngularJS

This displayed a few checkboxes, then bound them to an array, so we would always know which of the boxes were currently checked.

这显示了一些复选框,然后将它们绑定到一个数组,因此我们总是知道当前选中了哪些框。

enter image description here

在此处输入图片说明

And yes, you could ignore the contents of this bound variable until the submit button was pressed, if you wanted to.

是的,如果您愿意,您可以忽略此绑定变量的内容,直到按下提交按钮。

回答by Sidharth Panwar

As per your code all the checkboxes values will be available in the typeValues array. You can use something like this in your submit function:

根据您的代码,所有复选框值都将在 typeValues 数组中可用。你可以在你的提交函数中使用这样的东西:

$scope.typeValues

If you want to access the value of 3rd checkbox then you need to do this:

如果要访问第三个复选框的值,则需要执行以下操作:

var third = $scope.typeValues[2];

回答by Vineet

Declare your ng-modelas array in controller, like

ng-model在控制器中声明你的数组,比如

$scope.typeValues = [];

And in your template, please use

在您的模板中,请使用

ng-model="typeValues[item._id]"

And in your controller, you will get this model array valuesin terms of 0and 1. You can iterate over there.

在您的控制器中,您将model array values根据0和获得此信息1。你可以在那里迭代。