如何取消选中ng-repeat生成的复选框?

时间:2015-09-04 09:44:36

标签: javascript angularjs checkbox angularjs-directive angularjs-ng-repeat

我的申请表中有check boxes。我把它放在directive里面。现在的问题是我想从控制器中取消选中任何复选框。我可以unchecked所有checkboxes但不是特定的directive。有没有办法通过设置checkbox告诉model value to false取消选中 .directive('filterCheckbox', ['$compile', function ($compile) { return { link:function(scope,element,attrs){ var temp = '<div class="check-box pull-left">' + '<span class="ft" data-ng-class="{\'active\': '+attrs.ngModel+' ,\'inactive\':'+!attrs.ngModel+'}"></span>' + '</div>' + '<input type="checkbox" data-ng-model="'+attrs.ngModel+'" class="hide" data-ng-click="getFilteredAttrs(this)">' element.html($compile(temp)(scope)); scope.$on('clear-filter',function(){ scope[attrs.ngModel] = false; }); scope.$on('selected-filter',function(event,args){ //console.log('scope data',args); //console.log('scope ', scope[attrs.ngModel]); }); } } HTML: <div class="inner-filter-section col-xs-3"> <h5 class="nova-bold">Status</h5> <div class="outer-filter-section"> <div class="filter-option" ng-repeat=" status in filterStatusItems"> <label data-filter-checkbox class="pull-left filter-checkbox" ng-model="active" data-ng-click="setFilterObj('status')"></label> <span class="options">{{status}}</span> </div> </div> </div>

指令:

$scope.filterStatusItems = ['Success','Pending','Failed','Running','Timeout','Flow Import','Shared','Credits'];

JS:

C:\Windows\winsxs\x86_System.EnterpriseServices_b03f5f7f11d50a3a_2.0.0.0_x-ww_7d5f3790

2 个答案:

答案 0 :(得分:1)

以下是plunker

中的解决方案

我在这里没有看到使用指令。如果您还有其他一些行为要随意添加,请随时纠正我。

我只是在一个集合中初始化一个包含复选框引用的集合:

$scope.checkboxes = [];

在输入init i上,在$ scope.checkboxes集合中添加一个条目

ng-init="checkboxes.push({status:status, value:false})"

我将此值绑定到输入。我使用$ index将正确的对象绑定到输入:

checkboxes[$index].value 

现在取消选中机制:

此处我只显示属性valuetrue

的状态

点击即可将value设为false

  <button ng-click="checkbox.value = false" ng-repeat="checkbox in (checkboxes | filter:{value:true}) ">
    {{checkbox.status}}<span ng-if="!$last">,</span>
  </button>

这就是全部。

希望它有所帮助。如果这是我删除指令的错误,请告诉我,我可以根据您的需要调整一下。

答案 1 :(得分:-1)

use ng-checked and set the value like true or false or assign ng-model value 
 <input type="checkbox" ng-model="master"><br/>
 <input id="checkSlave" type="checkbox" ng-checked="master">