Как Показать / Скрыть элемент в ng-repeat на основе значения в объекте? В AngularJS

хорошо, я пытаюсь выяснить, как показать мои различные кнопки действий для каждого из моих элементов в списке на основе значения item.Status. Например: я хотел бы показать только кнопку редактирования, если item.Status is 'New'. Как лучше всего к этому подойти?

кроме того, решение должно иметь возможность поддерживать несколько значений. Например, кнопка "Удалить" будет отображаться только для 'New' и 'Completed', а не 'In Progress'.

можно ли это сделать только с помощью НГ-шоу?

<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>
10
angularjs javascript json

4 ответов

у вас есть несколько решений :

вы можете увидеть различия здесь.

для моей директивы ng-if самый лучший. Потому что он удалил элемент из ДОМ.

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

ссылка

16

есть несколько способов сделать это. Мне лично нравится декларативный, который означает, что ваш взгляд очень информативно и без логики. Что-то вроде этого.

<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 может быть повторно использована в других директивах. Я предполагаю, что другие части вашего представления будут зависеть от того, разрешено ли редактирование/удаление. Вы даже можете поместите эту функцию в службу для повторного использования во всем приложении.

3

даже с тех пор, как прошло некоторое время с тех пор, как ОП задал вопрос, добавив мои два цента, если кому-то еще нужен более простой вариант, который должен использовать фильтр angularjs.

таким образом, чтобы показать только элементы, где item.status === new использование:

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

если с другой стороны вы хотите только элементы, где item.status !== new использование:

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

сделать что-то вроде

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

Я не проверял код, и это просто предложение.

2