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

好的,我试图找出如何根据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>&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>

解决方法

您有多种解决方案：

> 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

原文链接：https://www.f2er.com/js/151186.html

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

解决方法

猜你在找的JavaScript相关文章