angular ng-if json array contains boolean

Question

Angular 1 app. Basically, there is an array of JSON object like this:

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

Now, in the view I print the messages like this:

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

Somewhere else I have this html:

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

The buttons above will never be showing together. But only one of them (and only if there are messages at all).

I wonder if it possibile to add in the ng-if above (in the button) a code for understanding if the button has to be showing. The button Mark all read will be showing only if there is at least one message marked with hasBeenRead: false. The button Mark all unread will be showing only if all the messages have been read.

I could do this in the controller. But I thought it would be neater if I could add this directly in the view. The difficulty for me is to access the hasBeenRead in the JSON from the view without iterating. Just asking "is there at least one unread message?".

Is there a way to do it in this way?

No, there isn't. Your options is either to create a filter or create some flag in your controller on which the statement ng-if should point to. I would go with the latter. — korteee
– korteee, Commented Feb 13, 2018 at 12:01

Rahul Sharma · Accepted Answer · 2018-02-13 12:22:07Z

3

Create filter as below

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>

answered Feb 13, 2018 at 12:22

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular ng-if json array contains boolean

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related