If / else on HTML markup with AngularJS

Question

<span ng-if="ItemIndex.ItemCount>0"><a href="#" ng-click="deleteItem(ItemIndex)"
    class="underlined-text-button"><i
    class="glyphicon glyphicon-remove"></i> Remove items</a>
</span>

If I have more than 0 item, text getting 'Remove items', right. But I want, if I have one item, text change to 'Remove item' So,

item == 1 == remove item

item > 1 == remove items

How can I setup this?

Kalhan · Accepted Answer · 2015-05-21 16:17:12Z

1

use like this,

<span ng-if="ItemIndex.ItemCount>0">
    <a href="#" ng-click="deleteItem(ItemIndex)"
    class="underlined-text-button"><i
    class="glyphicon glyphicon-remove"></i> 

    {{ (ItemIndex.ItemCount == 1) ? 'Remove item' : 'Remove items' }}


    </a>
</span>

if (ItemIndex.ItemCount == 1) is true then prints Remove item, else prints Remove items.

OR you can use ng-show, ng-hide or ng-if,

 <span ng-if="ItemIndex.ItemCount>0">
    <a href="#" ng-click="deleteItem(ItemIndex)"
    class="underlined-text-button"><i
    class="glyphicon glyphicon-remove"></i> 


    <span ng-show="ItemIndex.ItemCount == 1"> Remove item </span>
    <span ng-show="ItemIndex.ItemCount > 1"> Remove items </span>

    </a>
</span>

answered May 21, 2015 at 16:17

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

Collectives™ on Stack Overflow

If / else on HTML markup with AngularJS

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