Javascript 如何取消选中ng repeat生成的复选框?
我的应用程序中有Javascript 如何取消选中ng repeat生成的复选框?,javascript,angularjs,checkbox,angularjs-directive,angularjs-ng-repeat,Javascript,Angularjs,Checkbox,Angularjs Directive,Angularjs Ng Repeat,我的应用程序中有复选框。我把它放在指令中。现在的问题是我想取消选中控制器中的任何复选框。我可以取消选中所有复选框,但不能选中某个复选框。有没有办法通过将模型值设置为false来告诉指令取消选中复选框 指令: .directive('filterCheckbox', ['$compile', function ($compile) { return { link:function(scope,element,attrs){
复选框。我把它放在指令中。现在的问题是我想取消选中控制器中的任何复选框。我可以取消选中所有复选框
,但不能选中某个复选框。有没有办法通过将模型值设置为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>
使用ng checked并将值设置为true或false或分配ng模型值
这是一个解决方案
我只是没有看到这里使用指令。如果你还有其他行为要补充,请随意纠正我
我只是将一个包含复选框引用的集合初始化到范围中:
$scope.checkboxes = [];
在input init上,我在$scope.checkbox集合中添加了一个条目
ng-init="checkboxes.push({status:status, value:false})"
我将此值绑定到输入。我使用$index将正确的对象绑定到输入:
checkboxes[$index].value
现在,取消选中机制:
在这里,我只将属性值的状态显示为true
单击后,我只需将值设置为false
<button ng-click="checkbox.value = false" ng-repeat="checkbox in (checkboxes | filter:{value:true}) ">
{{checkbox.status}}<span ng-if="!$last">,</span>
</button>
{{checkbox.status},
差不多就这些了
希望有帮助。如果我删除该指令是一个错误,请让我知道我可以根据您的需要对我所做的做一些调整。您的指令的目的是什么?这实际上只是一种错误实践的匹配(使用$on、$compile、没有单独的作用域来管理绑定等等)。如果你给我这个目的,我可以在为你的问题提供解决方案的同时为你清理它。@Ved,你在你的作用域中设置复选框状态,并在html中使用它。。。抱歉,前面提到的,忘记了一些基本的语法规则。。是否清除?$on在这里用于侦听我要清除所有选中复选框时触发的事件。相同的$compile用于编译我的指令。@cafebabe1991您发布的链接。没有开门。让我先看看,这不是应该怎么做的。您应该在一个作用域中管理绑定,并只更新它们,而不是使用$on。这不是我所要求的。谢谢。很抱歉我在吃午饭
ng-init="checkboxes.push({status:status, value:false})"
checkboxes[$index].value
<button ng-click="checkbox.value = false" ng-repeat="checkbox in (checkboxes | filter:{value:true}) ">
{{checkbox.status}}<span ng-if="!$last">,</span>
</button>