Я ищу способ указать angular пропустить элемент в ng-repeat, если он соответствует выражению, в основном continue
;
В контроллере:
$scope.players = [{
name_key:'FirstPerson', first_name:'First', last_name:'Person'
}, {
name_key:'SecondPerson', first_name:'Second', last_name:'Person'
}]
Теперь в моем шаблоне я хочу показать всех, кто не подходит name_key='FirstPerson'
. Я решил, что это должны быть фильтры, поэтому я установил Plunkr, чтобы поиграть с ним, но мне не повезло. Plunkr Попытка
angularjs
angularjs-ng-repeat
aron.duby
источник
источник
Ответы:
Как предложил @Maxim Shoustin , лучший способ добиться того, чего вы хотите, - это использовать настраиваемый фильтр.
Но есть и другие способы, один из которых - использовать
ng-if
директиву для того же элемента, в котором вы поместилиng-repeat
директиву (также здесь плункер ):<ul> <li ng-repeat="player in players" ng-if="player.name_key!='FirstPerson'"></li> </ul>
Это может представлять незначительный недостаток с эстетической точки зрения, но имеет большое преимущество, заключающееся в том, что ваша фильтрация может быть основана на правиле, которое не так тесно связано с
players
массивом и которое может легко получить доступ к другим данным в области вашего приложения:<li ng-repeat="player in players" ng-if="app.loggedIn && player.name != user.name" ></li>
Обновление
Как уже говорилось, это одно из решений такого рода проблем, которое может соответствовать вашим потребностям, а может и не соответствовать.
Как указано в комментариях,
ng-if
это директива, которая на самом деле означает, что в фоновом режиме она может выполнять больше действий, чем вы могли ожидать.Например,
ng-if
создает новую область видимости из ее родителя :Обычно это не влияет на нормальное поведение, но во избежание непредвиденных ситуаций вы должны помнить об этом перед внедрением.
источник
Я знаю, что это старый, но на случай, если кто-то будет искать другое возможное решение, вот другой способ решить эту проблему - использовать стандартные функции фильтра :
Итак, для примера TS должно быть что-то вроде этого:
<ul> <li ng-repeat="player in players | filter: { name_key: '!FirstPerson' }"></li> </ul>
Нет необходимости писать собственные фильтры, нет необходимости использовать
ng-if
с новой областью действия.источник
player in players | filter: { name_key: '' }
? Эта конкретная директива не будет соответствовать только игрокам, у которых нет / пустоname_key
. Обратное,name_key: '!'
предназначенное для выбора любого игрока с непустым,name_key
также не будет работать.ng-repeat="(key, val) in player"
При реализации вы можете использовать настраиваемый фильтр
ng-repeat
. Что-то типа:data-ng-repeat="player in players | myfilter:search.name
myfilter.js
:app.filter('myfilter', function() { return function( items, name) { var filtered = []; angular.forEach(items, function(item) { if(name == undefined || name == ''){ filtered.push(item); } /* only if you want start With*/ // else if(item.name_key.substring(0, name.length) !== name){ // filtered.push(item); // } /* if you want contains*/ // else if(item.name_key.indexOf(name) < 0 ){ // filtered.push(item); // } /* if you want match full name*/ else if(item.name_key !== name ){ filtered.push(item); } }); return filtered; }; });
Демо Plunker
источник