Question

当我点击“APPLY”按钮时，我需要获取复选框的所有选中值。

我是AngularJs的新手。我有一个复选框列表，根据复选框条件，我必须选择并取消选择表格列，即复选框是实际列。

HTML

<li ng-repeat="col in columns">
  <span class="inputH">
    <input type="checkbox" value="col.name" ng-if="col.default === true" checked  ng-model="chk[col.name]" id="{{col.name}}">
    <input type="checkbox" value="col.name" ng-if="col.default === false"  ng-model="chk[col.name]" id="{{col.name}}">
  </span>
  <span class="textH">{{col.name}}</span>
</li>
<li>
  <button class="btn-default" ng-click="onCustomizationApply()">Apply</button>
  <button class="btn-default" ng-click="onCustomization()">Cancel</button>
 </li>

如果您注意到onCustomizationApply()，我需要获取所有已选中的复选框

Answer 1

试试这个为所有复选框提供公共类

<li ng-repeat="col in columns">
<span class="inputH">
<input class="mychkbox"type="checkbox" value="col.name" ng-if="col.default === true" ng-model="chk[col.name]" id="{{col.name}}">
<input class="mychkbox" type="checkbox" value="col.name" ng-if="col.default === false"  ng- model="chk[col.name]" id="{{col.name}}">
</span>
<span class="textH">{{col.name}}</span>
</li>
<li>
<button class="btn-default" ng-click="onCustomizationApply()">Apply</button>
<button class="btn-default" ng-click="onCustomization()">Cancel</button>
</li>

在功能上 onCustomizationApply（）

angular.forEach($(".gridCheck"),function(val,index){

if(val.checked){
//here we will get those fields which are checked and we can perform   operation
}
})

Answer 2

所以我修改了你的代码并制作了一个JSFiddle：http://jsfiddle.net/Lvc0u55v/5415/

HTML：

<li ng-repeat="col in columns">
    <span class="inputH">
    <input type="checkbox" ng-value="col.default" value="col.name" ng-model="chk[col.name]" id="{{col.name}}">
  </span>
    <span class="textH">{{col.name}}</span>
  </li>
  <li>
    <button class="btn-default" ng-click="onCustomizationApply()">Apply</button>
    <button class="btn-default" ng-click="onCustomization()">Cancel</button>
  </li>

角：

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

function MyCtrl($scope) {
  $scope.columns = [{
    name: 'col1',
    default: true
  }, {
    name: 'col2',
    default: true
  }, {
    name: 'col3',
    default: true
  }];

  $scope.chk = {};

  $scope.onCustomizationApply = function() {
    console.log($scope.chk);
  };
}

Answer 3

如果您从

更改代码（ng-model）

www.example.com/en/help

到

<input type="checkbox" value="col.name" ng-if="col.default === true" checked  ng-model="chk[col.name]" id="{{col.name}}">

因为更改此值时ng-model设置为{{col.colName}}，列中col的值也会更改。因此，在按钮的单击事件上，您可以遍历列以查看是否检查了值。

<input type="checkbox" value="col.name" ng-if="col.default === true" checked  ng-model="col.colName" id="{{col.name}}">

在AngularJS中单击按钮时，获取复选框列表的真或假

3 个答案: