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>

Answer 1

You have multiple solutions :

• ng-show/ng-hide
• ng-if

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

• AngularJS ng-if
• AngularJS ng-show/ng-hide
• MDN indexOf

Answer 2

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.

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

Answer 4

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.