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

Хорошо, я пытаюсь понять, как показывать мои различные кнопки действий для каждого из моих элементов в списке на основе значения 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>

Ответы

Ответ 1

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

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

Для моей директивы 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;
}

Ссылка

Ответ 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
    }
}

Что приятно об этом, ваше редактирование. Исключенная функция может быть повторно использована в других директивах. Я предполагаю, что другие части вашего представления будут зависеть от того, разрешено ли редактирование/удаление. Вы даже можете включить эту функцию в службу для повторного использования во всем приложении.

Ответ 3

Даже когда прошло некоторое время, так как ОП задал вопрос, добавив мои два цента на тот случай, если кому-то нужен более простой вариант, который должен использовать 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'}

Ответ 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>

Я не тестировал код, и это всего лишь предложение.