使用ng-model指令来绑定复选框的值,ng-change指令来监听复选框值的变化,并在控制器中设置一个过滤函数用于过滤数据。具体实现如下:
HTML代码:
-
{{item.name}}
AngularJS代码:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.items = [
{name: 'item1', selected: false},
{name: 'item2', selected: false},
{name: 'item3', selected: false},
{name: 'item4', selected: false},
];
$scope.myFilterFn = function(item) {
return !item.selected;
};
$scope.filterChanged = function() {
$scope.$apply();
};
});
解决方法的关键是在ng-model指令中绑定了选项对象的selected属性,这个属性表示该选项是否被选中。ng-change指令绑定了一个filterChanged方法,这个方法会在复选框值发生变化时调用,然后调用$scope.$apply()来强制刷新绑定的模型数据。在控制器中定义的myFilterFn方法用于过滤数据,只有当选项的selected属性为false时才会被显示出来。