Подтвердить что ты не робот

Создание условия 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>
4b9b3361

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