好的,我试图找出如何根据item.Status的值显示列表中每个项目的各种动作按钮.例如:如果item.Status是“新建”,我只想显示编辑按钮.什么是最好的方法呢?
此外,解决方案将需要能够支持多个值.例如,删除按钮只会显示“新建”和“已完成”,但不会显示“正在进行”.
这可以通过简单的显示来完成吗?
<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>
解决方法
您有多种解决方案:
> ng-show/ng-hide
> ng-if
你可以看到差异here.
因为我的指令ng-if是最好的.因为它从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;
}
参考
> AngularJS ng-if
> AngularJS ng-show/ng-hide
> MDN indexOf