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

您有多种解决方案：

您可以看到差异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;
}

参考的

Answer 2

这样做的方法不止一种。我个人喜欢声明，这意味着保持你的观点非常具有描述性，没有逻辑。就像这样。

<div ng-show="editingAllowed(item)">Edit</div>

或使用ng-if

然后在你的控制器中

$scope.editingAllowed = function(item){
    //You can add aditional logic here
    if(item.status==='New'){
        return true
    }
}

这样做的好处是你的editingAllowed函数可以在其他指令中重复使用。我猜你视图的其他部分将取决于是否允许编辑/删除。您甚至可以将该功能放入服务中，以便在整个应用程序中重复使用。

Answer 3

即使自OP提出问题已经有一段时间了，加上我的两分钱以防其他人需要更简单的选择，即使用angularjs filter。

所以只显示item.status === new使用的项目：

 ng-repeat="item in requestslist.value | filter: {status: 'new'}

如果另一方面，您只想要item.status !== new使用的项目：

 ng-repeat="item in requestslist.value | filter: {status: '!new'}

Answer 4

做类似

的事情

<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>

我还没有对代码进行测试，这只是一个建议。

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

4 个答案: