Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
23
rated 0 times [  30] [ 7]  / answers: 1 / hits: 38753  / 10 Years ago, mon, march 17, 2014, 12:00:00

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>

More From » json

 Answers
6

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




[#71941] Sunday, March 16, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
bruno

Total Points: 602
Total Questions: 100
Total Answers: 111

Location: Tajikistan
Member since Sun, Aug 29, 2021
3 Years ago
;