如何根据对象中的值显示/隐藏ng-repeat中的元素？Angularjs

Question

好的,我正在试图弄清楚如何根据值显示列表中每个项目的各种动作按钮item.Status.例如:我想,如果只显示编辑按钮item.Status是'New'.解决这个问题的最佳方法是什么？

此外,解决方案需要能够支持多个值.例如,"删除"按钮仅显示'New'和'Completed',但不显示'In Progress'.

这可以通过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

您有多种解决方案:

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

你可以在这里看到差异.

对我而言,指令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指数