javascript - AngularJS 上带有复选框的 bool 过滤器

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 将为 true。如果不选中，它将是错误的。第二个复选框也是如此，但您应该使用不同的 ng-model 属性。

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

接下来您需要在 Controller 中创建自定义过滤器:

$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;
    }
};

您需要确保在 Controller 中定义了$scope.search。

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

现在开始你的ng-repeat:

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