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

【问题标题】：How to show/hide element in ng-repeat based on value in object? Angularjs如何根据对象中的值显示/隐藏 ng-repeat 中的元素？ Angularjs
【发布时间】：2014-04-22 22:26:13
【问题描述】：

好的，我正在尝试根据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>

【问题讨论】：

标签： javascript json angularjs

【解决方案1】：

即使自从 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'}

【讨论】：

【解决方案2】：

您有多种解决方案：

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

参考

【讨论】：

是的，但是删除按钮会是这样的 `ng-if="item.Status === 'New' || item.Status === 'Completed' || item.Status === 'In Progress'"> 这很长。
感谢您的回复。这就是我要找的！
我明白为什么你们都同意这是最好的方法。如果值发生变化，与在视图中查找它们相比，它会更清洁和更容易维护。谢谢你们俩。
是的，正如我所说，如果您认为您将在应用程序的其他部分进行此类检查，最好将这些功能放在服务中而不是控制器中，因为可重用性。理想情况下，控制器只是服务中的逻辑和视图之间的粘合剂。

【解决方案3】：

有不止一种方法可以做到这一点。我个人喜欢声明式，这意味着您的观点非常具有描述性并且没有逻辑。所以像这样。

<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 函数可以在其他指令中重复使用。我猜您视图的其他部分将取决于是否允许编辑/删除。您甚至可以将该功能放入服务中，以便在整个应用程序中重复使用。

【讨论】：

这是一个很好的答案。我早些时候尝试过这个，但并不完全掌握诀窍。 =D

【解决方案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>

我没有测试过代码，这只是一个建议。

【讨论】：