AngularJS: ngIf in array of objects with different properties

Question

I have some issue with ngIf directive. I tried a lot of ways to resolve it, but unfortunately failed.

I have an array of objects with different properties. Something like this:

    object = [
    {
        name: "1",
        isNumber: true,
    },
    {
        name: "2",
        isNumber: true,
    },
    {
        name: "3",
        isNumber: true,
    },
    {
        name: "4",
        isNumber: true,
    },
    {
        name: "5",
        isNumber: true,
    },
    {
        name: "#",
        isNumber: false,
    },
    {
        name: "*",
        isNumber: false,
    }

I need to use ngIf on the last object with true value of isNumber property. I don't know how much objects with isNumber on true will be in my array. It can be 7 or 82. Nobody knows. Also objects with isNumber on false won't be always in my array. Sometimes array will be have only objects with isNumber on true and no objects with isNumber on false.

How can i achieve this using ngIf?

Thanks in advance.

UPDATE:

I have something like this:

1, 2, 3, 4, 5, 6, 7, *, #.

And I don't want to have "Down" button on last element with true value of isNumber property (7 in this case). Because if user moves it down, I'll have this:

1, 2, 3, 4, 5, 6, *, 7, #.

And it will be wrong logic.

So, I need to use ngIf, so that I could disable this button on that element. But sometimes I can have smth like this (without extra symbols):

1, 2, 3, 4, 5.

And in this situation I don't need "Down" button on last element too. Because it's impossible to move last element down.

Not exactly sure what you're asking. Do you want the ng-if to check if isNumber is true OR if it's the last element? Can you give some more code as well as the expected output? — user499054
– user499054, Commented Sep 25, 2015 at 20:30
I want to check if isNumber is true AND at the same time it must the last element. — Vlad Turak
– Vlad Turak, Commented Sep 25, 2015 at 20:31

score 2 · Accepted Answer · 2015-09-25 20:54:27Z

2

If you're trying to find if it's the last element AND if isNumber is set to true, you can use this:

<span ng-repeat="item in items" ng-if="item.isNumber && $last">

$last is a special variable defined through ngRepeat, located here. Since ngIf accepts a boolean statement, you can use both the logical && and || operators.

Edit: if you're not iterating over it with ngRepeat and you just want to select the last element, you can do something like this to select the last one, then use ngIf to display it if isNumber is set to true:

<span ng-bind="list[list.length - 1]" ng-if="list.isNumber">

Edit 2: Could you "peek" at the next element and see if the next isNumber is set to false? Like this:

<span ng-repeat="...">
   <span ng-if="!list[$index + 1].isNumber"></span>
</span>

Like $last, I'm using a special variable called $index to go to the next element in the ngRepeat. (not sure if Angular automatically checks out-of-bounds errors, or if it'll throw an error)

edited Sep 25, 2015 at 20:54

answered Sep 25, 2015 at 20:32

user499054

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

7 Comments

Michel Over a year ago

Is OP ng-repeat-ing over the array?

user499054 Over a year ago

Hmm. I guess I just assumed OP was iterating over the array.

Vlad Turak Over a year ago

ngIf here returns true if the last element of array will be with isNumber on true. But what will be if the last element have isNumber on false? I need to disable "Down" button on the last element with true value of isNumber property. So that this element couldn't be possible to move down. I have something like this: 1, 2, 3, 4, 5, #, *. And I don't want the last element (5 in this case) have "Down" button, because i'll get smth like this: 1, 2, 3, 4, #, 5, * - it will be an error.

user499054 Over a year ago

I posted an update ("Edit 2"). Could you check if the next element in the iteration isn't a number?

Vlad Turak Over a year ago

Unfortunately, it doesn't work, but thank you for help.

|

Michel · Accepted Answer · 2015-09-27 21:57:34Z

Your initial question was a bit confusing, but thanks to the edits I think I understand what you need. By using $index in combination with $last, you can achieve what you want to do in a simple way:

<div ng-repeat="item in items">
    {{item.name}}
    <button ng-if="!$last && items[$index + 1].isNumber">Down</button>
</div>

Explanation

The condition to display the Down button is !$last && items[$index + 1].isNumber. Indeed, we must show the button if:

the current item is not the last one: !$last
the next one IS a number: items[$index + 1].isNumber

Note that we can peek at the next element without error because we checked earlier that we are not on the last item.

See demo fiddle

Collectives™ on Stack Overflow

AngularJS: ngIf in array of objects with different properties

2 Answers 2

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Related