我正在尝试制作一个具有一个复选框列表的演示。我能够使用ng-repeat显示该列表。
如果用户单击一个复选框（仅选中一个复选框），我需要什么。它只显示一列（100％）宽度。用户选中两列时，它显示两列等宽（50％）宽度。如果用户选中三列列，它显示等宽的三列。就像用户选中了四个复选框一样，它显示了等宽的四列。最初选中了某些复选框（checked：true）。
这是我的代码http://codepen.io/anon/pen/adBroe?editors=101
init();
function init(){
for(var i =0;i<self.data.length;i++){
var obj=self.data[i];
if(obj.checked)
{
self.selectedList.push(obj);
}
}
alert('starting '+self.selectedList.length)
}
self.checkBoxClick=function(obj,i){
if(obj.checked)
{
alert('if')
self.selectedList.push(obj);
}else
{
alert('else'+i);
self.selectedList.splice(i,1);
}
alert(self.selectedList.length);
}
})
这是我想要展示的
<div class='container-fluid'>
<div class='row'>
<div ng-repeat="i in vm.selectedList" class='col-xs-{{12/vm.selectedList.length}}'>
{{i.name}}
</div>
</div>
</div>
它可以简单得多。在HTML中，您甚至不需要ngChange处理程序，只需绑定到checked属性即可：
<div class="checkbox" ng-repeat='v in vm.data'>
<label>
<input type="checkbox" ng-model='v.checked'> {{v.name}}
</label>
</div>
然后使用just渲染列ngRepeat：
<div ng-repeat="i in filteredList = (vm.data | filter:{checked:true})" class='col-xs-{{12/filteredList.length}}'>
{{i.name}}
</div>
因此，结果是，使用Angular使用template进行所有必要的列过滤时，完全无需任何逻辑即可清理控制器vm.data | filter:{checked:true}。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句