Question

我有一个属性published的对象数组，可以是true或false。我正在构建一个过滤器，只能显示已发布或仅显示的项目。

到目前为止，已发布的一个可以正常工作：

<input 
   type="checkbox" 
   ng-model="search.published" 
   ng-change="search.published = search.published ? true : undefined"> 
Published

在ng-repeat中它看起来像这样：

ng-repeat="exhibitor in filterItems = (data | filter: search)"

当我尝试添加另一个复选框以仅显示未发布的项目时，问题出现了。

我已尝试使用第二个复选框：

<input 
   type="checkbox" 
   ng-model="search.published" 
   ng-change="search.published = search.published ? false : undefined"> 
Unpublished

但当然它不能与已发布的项目具有相同的模型。此外，即使我删除了第一个复选框，也不会勾选该复选框。

有关如何解决此问题的任何提示？

Answer 1

复选框会自动为其ng-model值分配true或false值，因此无需按照您的方式使用ng-change。

<input 
   type="checkbox" 
   ng-model="search.published">
Published

选中后，search.published将为真。如果未选中，则为false。第二个复选框也是如此，但您应该使用不同的ng-model属性。

<input 
   type="checkbox" 
   ng-model="search.unpublished"> 
Unpublished

接下来，您需要在控制器中创建自定义过滤器：

$scope.myCustomFilter = function(exhibitor) {
    if (exhibitor.published && exhibitor.published === $scope.search.published) {
        return exhibitor;
    } else if (!exhibitor.published && exhibitor.published === $scope.search.unpublished) {
        return exhibitor;
    }
};

您需要确保在控制器中定义$scope.search。

$scope.search = {
    published: false,
    unpublished: false
};

现在为您的ng-repeat：

ng-repeat="exhibitor in filterItems | filter:myCustomFilter"

带有AngularJS复选框的布尔过滤器

1 个答案: