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>

score 17 · Accepted Answer · edited May 23 '17 at 12:17

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 '17 at 12:17

Community

1
1

answered Mar 17 '14 at 16:04

R3tep

12,512
10
48
75

3

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. – NicolasMoise Mar 17 '14 at 16:14
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. – justin.c Mar 17 '14 at 16:26
2

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 Mar 17 '14 at 16:30

score 3 · Answer 2 · answered Mar 17 '14 at 16:07

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.

This is a great answer. I was attempting this earlier, but didn't quite have the know-how. =D — justin.c, Mar 17 '14 at 16:22

score 3 · Answer 3 · answered Jul 06 '17 at 11:15

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'}

score 2 · Answer 4 · answered Mar 17 '14 at 16:01

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.

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

4 Answers4