How to show/hide element in ng-repeat based on value in object? Angularjs

Question

Ok, I'm trying to figure out how to show my various action buttons for each of my items in the list based on the value of item.Status. For example: I would like to only show the Edit button if item.Status is 'New'. What is the best way to approach this?

Also, the solution would need to be able to support multiple values. For example, the Delete button would only show for 'New' and 'Completed', but not for 'In Progress'.

Can this be done with just ng-show?

<ul class="sidebar-list">
    <li class="list-item" ng-repeat="item in requestslist.value | filter:searchText | orderBy:'Modified':true">
        <div class="list-item-info">
            <ul id="" class="list-inline clearfix">
                <li class=""><span id="" class="">#{{item.Id}}</span></li>
                <li class=""><span id="" class="bold">{{item.RecipientName}}</span></li>
                <li class=""><span id="" class="">{{item.RecipientCompany}}</span></li>
            </ul>
            <ul id="" class="list-inline clearfix">
                <li class=""><span id="" class="label label-primary">{{item.Status}}</span></li>
            </ul>
        </div>
        <div class="list-item-actions">
            <div class="btn-group">
                <button ng-click="doRemind()" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-bullhorn"></span>&nbsp;Remind</button>
                <button ng-click="doView()" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-eye-open"></span>&nbsp;View</button>
                <button ng-click="doEdit(item)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span>&nbsp;Edit</button>
                <button ng-click="doClose(item)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-ban-circle"></span>&nbsp;Close</button>
                <button ng-click="doDelete(item)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-ban-minus"></span>&nbsp;Delete</button>
            </div>
        </div>
    </li>
</ul>

Community · Accepted Answer · 2017-05-23 12:17:21Z

17

You have multiple solutions :

You can see the differences here.

For my the directive ng-if is the best. Because it removed the element from the DOM.

HTML:

<button ng-if="showDelete(item.Status)">
    ...
</button>

JS:

$scope.showDelete = function(itemStatus) {
    var testStatus = ["New", "Completed"];

    if(testStatus.indexOf(itemStatus) > -1) { //test the Status
       return true;
    }
    return false;
}

Reference

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Mar 17, 2014 at 16:04

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

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

3 Comments

NicolasMoise Over a year ago

Yea but then the deletion button would be something like this `ng-if="item.Status === 'New' || item.Status === 'Completed' || item.Status === 'In Progress'"> which is quite long.

justin.c Over a year ago

I see why you both agree this is the best way. It is a bit cleaner and easier to maintain if the values change, vs hunting them down in the view. Thanks to both of you.

NicolasMoise Over a year ago

Yup and as I've said, if you think you're going to be doing this kind of checks in other parts of your app, better put the functions in a service instead of the controller, for re-usability. Ideally, controllers are just the glue between the logic in your services and your view.

NicolasMoise · Accepted Answer · 2014-03-17 16:07:27Z

3

There's more than one way to do this. I personally like the declarative which means keeping your view very descriptive and free of logic. So something like this.

<div ng-show="editingAllowed(item)">Edit</div>

or use ng-if

and then in your controller

$scope.editingAllowed = function(item){
    //You can add aditional logic here
    if(item.status==='New'){
        return true
    }
}

What's nice about this is your editingAllowed function could be re-used in other directives. I'm guessing other parts of your view will depend on whether editing/deletion is allowed. You can even put that function in a service to re-use across your entire app.

answered Mar 17, 2014 at 16:07

NicolasMoise

7,27910 gold badges47 silver badges65 bronze badges

1 Comment

justin.c Over a year ago

This is a great answer. I was attempting this earlier, but didn't quite have the know-how. =D

Rabbi Shuki Gur · Accepted Answer · 2017-07-06 11:15:26Z

3

Even since it has been a while since the OP asked the question, adding my two cents in case someone else needs an easier option which is to use the angularjs filter.

So to show only items where item.status === new use:

 ng-repeat="item in requestslist.value | filter: {status: 'new'}

IF on the other hand you want only items where item.status !== new use:

 ng-repeat="item in requestslist.value | filter: {status: '!new'}

answered Jul 6, 2017 at 11:15

Rabbi Shuki Gur

1,72620 silver badges37 bronze badges

Comments

Mobin Skariya · Accepted Answer · 2014-03-17 16:01:42Z

2

do something like

<button ng-show="item.Status != 'In Progress'" ng-click="doDelete(item)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-ban-minus"></span>&nbsp;Delete</button>

I haven't tested the code and this is just a suggestion.

answered Mar 17, 2014 at 16:01

Mobin Skariya

3923 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to show/hide element in ng-repeat based on value in object? Angularjs

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related