Menu
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> Remind</button>
<button ng-click="doView()" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-eye-open"></span> View</button>
<button ng-click="doEdit(item)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
<button ng-click="doClose(item)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-ban-circle"></span> Close</button>
<button ng-click="doDelete(item)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-ban-minus"></span> Delete</button>
</div>
</div>
</li>
</ul>
401
How to show/hide data when the particular condition is true in AngularJS ? In AngularJS, in order to hide or show data or content, we can use the *ngIf structural directive. By using this, we can evaluate conditions and then *ngIf based on the condition displays the content.
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
ng-repeat creates a new scope for each iteration so will not perform as well as ng-options. For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat. Save this answer.
Absolutely not. First of all, the two directives can trip over each other( see this JSFiddle, as provided by Joel Skrepnek), and is generally just bad design.
You have multiple solutions :
ng-show/ng-hideng-ifYou 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
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
