Создание условия angular
В настоящее время я использую текстовый ввод для фильтрации списка элементов. Я хотел бы сделать это, когда определенная переменная задана, список не фильтрует, независимо от того, что представляет собой текстовый ввод. Любые советы о том, как я могу это сделать?
<a ng-repeat="set in data | filter: { value: search }" data-id="{{set.id}}" ng-mousedown="setBox(set)" ng-mouseover="setSelected(set, $event)" ng-bind-html="set.value | trustHTML"></a>
Ответы
Ответ 1
Вы можете добиться этого, если вы установите выражение фильтра на ''
(или undefined
) - это приводит к тому, что фильтр не будет применяться - если ваш disableFilter
установлен или фактическое выражение фильтра в противном случае.
Итак, предполагая, что эта переменная переключения - disableFilter
- является логической:
<a ng-repeat="set in data | filter: (!disableFilter || '') && filterExpression">
(с filterExpression
является тем, что вы хотите фильтровать). Ваш конкретный случай:
<a ng-repeat="set in data | filter: (!disableFilter || '') && {value: search}">
EDIT:
Чтобы объяснить, как это работает,
- Помните, что
||
и &&
возвращают значение одного из своих операндов.
-
||
и &&
использовать оценку короткого замыкания - true || (anything)
возвращает true
; false && (anything)
возвращает false
- без оценки выражения (anything)
.
-
''
является ложным (или использует undefined
вместо этого, если он более ясен)
Итак,
когда disableFilter === true
, !disableFilter === false
, таким образом, второй операнд ||
- пустая строка ''
- оценивается (это ложь), а (!disableFilter || '')
возвращает ''
- значение ложности, которое короткое -схем операции &&
и не оценивает второй операнд &&
. Таким образом, возвращаемое значение выражения ''
.
когда disableFilter === false
, !disableFilter === true
, который коротко замыкает операцию ||
, затем вычисляется и возвращается второй операнд &&
. Таким образом, возвращаемое значение выражения {value: search}
.
Подробнее о логических операциях здесь
Ответ 2
Я думаю, что следующее немного менее сложное решение. Трудные решения вызывают ошибки для будущих разработчиков.
Здесь мое предложение:
<a ng-repeat="set in data | filter: (shouldFilter ? filterExpression : '')">
или
<a ng-repeat="set in data | filter: (shouldFilter ? {value: search} : '')">
Просто, если shouldFilter, то дайте ему свое выражение фильтра, иначе ничего не давайте.
Использование простого трехмерного выражения будет легче для читаемости.
Ответ 3
Возможно, используйте ng-if
?
<a ng-if="!myConditional" ng-repeat="set in data" data-id="{{set.id}}" ng-mousedown="setBox(set)" ng-mouseover="setSelected(set, $event)" ng-bind-html="set.value | trustHTML"></a>
<a ng-if="myConditional" ng-repeat="set in data | filter: { value: search }" data-id="{{set.id}}" ng-mousedown="setBox(set)" ng-mouseover="setSelected(set, $event)" ng-bind-html="set.value | trustHTML"></a>
Это кажется .
Ответ 4
Вот что я сделал. Во-первых, у меня был элемент управления select, заполненный с моего контроллера, одним статическим элементом (Select...) с строковым значением нулевой длины:
<select data-ng-model="districtFilter" class="form-control" data-ng-options="d.DistrictId as d.DistrictName for d in districts | orderBy: 'DistrictName'"><option value="">Select...</option></select>
Затем я применил фильтр условно в таблице. Он появляется, когда фильтр имеет значение null, установка его на undefined очищает его:
<tr data-ng-repeat="courtEntity in courts | filter:{ 'DistrictId' : districtFilter === null ? undefined : districtFilter}">
Ответ 5
У меня был сложный случай
- Есть список записей, которые говорят о нем.
- Отфильтровать два других свойства
prop1
, prop2
, выбранные пользователем из раскрывающегося списка
- Еще одно раскрывающееся меню (
prop3
) имеет два значения 1 и 2, если пользователь не выбирает 2 фильтра, не следует применять
Вот мой результат:
ng-repeat="prod in filterdProd =
(products | filter : model.prop3 == 2 ? '' :
{ 'prop1': model.prop1 || 'none',
'prop2': model.prop2 }) |
orderBy: 'productrName'"
Если фильтр model.prop3 == 2 ? ''
не будет применяться иначе...
Мы также можем использовать подсчет записей с помощью filterdProd
Ответ 6
Создавайте функции и объединяйтесь с filterExpression.
Пример. У меня есть список студентов, как показано ниже:
$scope.students = [
{ name: 'Hai', age: 25, gender: 'boy' },
{ name: 'Hai', age: 30, gender: 'girl' },
{ name: 'Ho', age: 25, gender: 'boy' },
{ name: 'Hoan', age: 40, gender: 'girl' },
{ name: 'Hieu', age: 25, gender: 'boy' }
];
Я хочу отфильтровать студентов по полу, чтобы быть мальчиком, и фильтровать их по имени.
Сначала я создаю функцию с именем "filterbyboy" следующим образом:
$scope.filterbyboy = function (genderstr) {
if ((typeof $scope.search === 'undefined')||($scope.search === ''))
return (genderstr = "")
else
return (genderstr = "boy");
};
Объяснение: если не имя фильтра, тогда отобразите все ученики, которые фильтруют по имени и полу, как "мальчик"
Ниже приведена демонстрация Как использовать и использовать оператор в примере AngularJs