如何在 Angular 中执行“除外”过滤器？答案

【问题标题】：How do perform an "except" filter in Angular?如何在 Angular 中执行“除外”过滤器？
【发布时间】：2015-10-31 00:41:22
【问题描述】：

假设我有一个允许用户从图书馆借书的 Angular 视图。我的数据模型由两个 Book 实体数组组成，每个实体都有一个唯一的 ID 字段和一个标题字段。第一个数组包含图书馆中每本书的实体，第二个数组包含用户已签出的每本书的实体。

libraryBooks = [{
    id: 0,
    title: "The Adventure of Tom Sawyer"}, {
    id: 1,
    title: "Moby Dick" }, {
    id: 2,
    title: "To Kill a Mockingbird" }, {
    id: 3,
    title: "The Three Little Pigs" }];
checkedOutBooks = [{
    id: 0,
    title: "The Adventure of Tom Sawyer"}, {
    id: 3,
    title: "The Three Little Pigs" }];

简而言之，图书馆有四本书，用户已借出两本书。如果我想列出两个数组中的书，我可以这样写：

<h1>Library Books</h1>
<div ng-repeat="book in libraryBooks">
    {{ book.title }}
</div>
<h1>Checked out Books</h1>
<div ng-repeat="book in checkedOutBooks">
    {{ book.title }}
</div>

假设我想显示第三个列表：用户尚未签出的图书馆图书子集。

我已经看到使用 Angular“过滤器”指定一个不应匹配的特定值以缩小列表范围的示例，但在这种情况下，我想排除多个值，所以我该怎么做关于这样做？

我已经看到将自定义过滤器添加到 Angular 模块的示例，但我认为在这种情况下，任何自定义过滤器都应限定在此控制器的范围内。

【问题讨论】：

我这里有一个类似的例子，我几年前写的：controller，HTML。这些示例展示了如何过滤掉已删除的产品。
在您的示例@Danny 中，看起来您使用函数 setFilter 创建了一个过滤器。在您的视图中如何访问它？
查看评论编辑中的HTML链接，具体是ng-class="{active: filterExp=='non-del'}" ng-click="setFilter('non-del')"和<div class="panel" ng-repeat="product in Products | orderBy:predicate:reverse | filter:filterFunc">

标签： angularjs angularjs-filter

【解决方案1】：

我已经弄清楚了。解决方案是编写一个过滤函数并将其附加到 $scope，如下所示：

function filter_notCheckedOut(book) {
    var i;
    for (i = 0; i < that.libraryBooks.length; i += 1) {
        if (that.libraryBooks[i].id === page.id) {
            return false;
        }
    }
    return true;
}

在视图中，它可以像这样被引用：

<h1>Books not checked out</h1>
<div ng-repeat="book in libraryBooks | filter:filter_notCheckedOut">
    {{ book.title }}
</div>

【讨论】：