Question

Angular 1 app。基本上，有一个JSON对象数组，如下所示：

ctrl.messages = 
[
    {id: 1, text: 'hello1',createdBy:{name: 'Jack', hasBeenRead: false} }
    ,{id: 2, text: 'hello2',createdBy:{name: 'Steven', hasBeenRead: true} }
];

现在，在视图中我打印了这样的消息：

<div ng-repeat="message in messages">
    Message: {{message.text}}
</div>

其他地方我有这个HTML：

<div ng-if="messages.length > 0">
<button ng-if="?">Mark all read</button>
<button ng-if="?">Mark all unread</button>
</div>

上面的按钮永远不会一起显示。但只有其中一个（并且只有在有消息的情况下）。

我想知道是否可以在ng-if上面（在按钮中）添加一个代码来理解按钮是否必须显示。仅当至少有一条消息标有Mark all read时，才会显示按钮hasBeenRead: false。仅当已阅读所有消息时，才会显示按钮Mark all unread。

我可以在控制器中执行此操作。但我认为如果我可以直接在视图中添加它会更简洁。我的困难是从视图中访问JSON中的hasBeenRead而不进行迭代。只是询问＆＃34;是否至少有一条未读消息？＆＃34;。

有没有办法以这种方式做到这一点？

Answer 1

按以下方式创建过滤器

app.filter('hasBeenRead', function () {
    return function (input) {
        return input.some(val => !val.createdBy.hasBeenRead);
    }
});


<div ng-if="messages.length > 0">
    <button ng-if="!messages|hasBeenRead">Mark all read</button>
    <button ng-if="messages|hasBeenRead">Mark all unread</button>
</div>

angular ng-if json数组包含布尔值

1 个答案: