Using ng-if with multiple conditions in HTML

Question

I'm trying to add a button that only shows for particular index numbers:

            <tbody data-ng-repeat="(wholesalerIndex,wholesaler) in wholesalers">
                <tr>
                    <td>
                        <button ng-if="$index != 0 || $index != 3" class="btn btn-danger" data-ng-click="removeWholesaler(wholesaler, wholesalerIndex)">Up</button>
                        <button class="btn btn-danger" data-ng-click="removeWholesaler(wholesaler, wholesalerIndex)">Down</button>
                    </td>
                </tr>
            </tbody>

ng-if isn't working. It works fine when I have 1 condition ng-if="$index != 0", but when I try to add the OR (||) statement it stops working.

What am I doing wrong and how do I fix it?

Just a thought - perhaps the order of operations is getting screwed up. Try using parenthesis like this: ($index != 0) || ($index != 3) — Paurian
– Paurian, Commented Apr 24, 2017 at 17:16
Actually - it looks like the logic is off. If Index equals 3, it is not equal to 0 so it passes. If the index equals 0, it's not equal to 3 so it passes. If index = 10000 it is neither equal to 0 (so it passes) nor equal to 3 (so it also passes) — Paurian
– Paurian, Commented Apr 24, 2017 at 17:18

Paurian · Accepted Answer · 2017-04-24 17:21:13Z

1

My guess is the logic is off. Try logical and instead of logical or.

<button ng-if="$index != 0 && $index != 3" class="btn btn-danger" data-ng-click="removeWholesaler(wholesaler, wholesalerIndex)">Up</button>

answered Apr 24, 2017 at 17:21

Paurian

1,41211 silver badges18 bronze badges

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

2 Comments

David Tunnell Over a year ago

This solves it. But why would that qualify as true when index is only zero at the moment?

Paurian Over a year ago

As angular iterates through each wholesaler the $index is set. ng-if tests that $index as it passes through the loop. If the index is 0, the "$index != 3" test will pass because 0 is not 3. Vice-versa when $index is 3, it will pass the "$index != 0" test. By using logical AND, the overall test indicates that $index may not be zero AND $index may not be three. Otherwise, the test is truthy.

Jonathan Brizio · Accepted Answer · 2017-04-24 17:24:19Z

0

Just use ng-show it will work :)

<tbody data-ng-repeat="(wholesalerIndex,wholesaler) in wholesalers">
    <tr>
        <td>
            <button ng-show="$index != 0 || $index != 3" class="btn btn-danger" data-ng-click="removeWholesaler(wholesaler, wholesalerIndex)">Up</button>
            <button class="btn btn-danger" data-ng-click="removeWholesaler(wholesaler, wholesalerIndex)">Down</button>
        </td>
    </tr>
</tbody>

I hope that this helps.

edited Apr 24, 2017 at 17:24

answered Apr 24, 2017 at 17:18

Jonathan Brizio

1,2601 gold badge15 silver badges30 bronze badges

2 Comments

David Tunnell Over a year ago

wholesaler index is an internal primary key which is different.

Jonathan Brizio Over a year ago

Right! Try using the ng-show directive instead of ng-if

Collectives™ on Stack Overflow

Using ng-if with multiple conditions in HTML

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related