Создание условного углового фильтра

в настоящее время я использую текстовый ввод для фильтрации списка элементов. Я хотел бы сделать так, чтобы при установке определенной переменной список не фильтровался, независимо от того, что такое ввод текста. Любые советы о том, как я могу это сделать?

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

7 ответов:

вы можете достичь этого, если вы установите выражение фильтра в '' (или undefined) - это приводит к тому, что фильтр не применяется-когда ваш disableFilter устанавливается, или к фактическому выражению фильтра в противном случае.

Итак, предполагая, что эта переменная переключения -disableFilter - это логическое :

<a ng-repeat="set in data | filter: (!disableFilter || '') && filterExpression">

(С filterExpression независимо от выражения, которое вы хотите отфильтровать). Ваш конкретный случай будет:

<a ng-repeat="set in data | filter: (!disableFilter || '') && {value: search}">

EDIT:

To объясните, как это работает.

  1. помните, что || и && возвращает значение одного из его операндов.
  2. || и && используйте оценку короткого замыкания -true || (anything) возвращает true;false && (anything) возвращает false - без оценки (anything) выражение.
  3. '' является ложным (или использовать undefined вместо этого, если это яснее)

и так,

, когда disableFilter === true,!disableFilter === false, таким образом, второй операнд из || - пустая строка '' - оценивается (это ложь), и (!disableFilter || '') возвращает '' - ложное значение, которое закорачивает && операции и не вычисляет второй операнд &&. Возвращаемое значение выражения таким образом ''.

, когда disableFilter === false,!disableFilter === true, который закоротит || операции, то второй операнд && вычисляется и возвращается. Возвращаемое значение выражения таким образом {value: search}.

подробнее о логические операторы здесь

91

Я думаю, что следующее является немного менее сложным решением. Хитрые решения вызывают ошибки для будущих разработчиков.

вот мое предложение:

<a ng-repeat="set in data | filter: (shouldFilter ? filterExpression : '')">

или

<a ng-repeat="set in data | filter: (shouldFilter ? {value: search} : '')">

просто, если shouldFilter, то дайте ему свое выражение фильтра, иначе ничего не дайте. Использование простого тернарного выражения будет проще для читаемости.

42

возможно использовать 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>

Кажется решение.

6

вот что я сделал. Во-первых, у меня был элемент управления 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>

затем я применил фильтр условно на стол. Он появляется, когда фильтр равен нулю, установка его в undefined очищает его:

<tr data-ng-repeat="courtEntity in courts | filter:{ 'DistrictId' : districtFilter === null ? undefined : districtFilter}">
6

у меня был сложный случай

  • есть список записей говорят, что это продукты
  • фильтр по двум другим имуществом 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

0

Я нашел следующее решение более простым и эффективным

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.package=[{"PkgServiceId":null,"PkgServicesName":" HB, TLC, DLC &amp; ESR, EDTA WHOLE BLOOD, HBSAG CONFIRMATION,SERUM, Blood Cholesterol","PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":108,"ServiceName":"Family Health Package"},{"PkgServiceId":108,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":70,"ServiceName":"HB, TLC, DLC & ESR, EDTA WHOLE BLOOD"},{"PkgServiceId":108,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":71,"ServiceName":"HBSAG CONFIRMATION,SERUM"},{"PkgServiceId":108,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":3,"ServiceDesc":"Its used to evaluate your overall health and detect a wide range of disorders","ServiceId":2,"ServiceName":"Blood Cholesterol"},{"PkgServiceId":null,"PkgServicesName":" MRI Test, HB, TLC &amp; DLC, EDTA WHOLE BLOOD","PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":107,"ServiceName":"Child Health Package"},{"PkgServiceId":107,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":"Its used to evaluate your overall health and detect a wide range of disorders","ServiceId":5,"ServiceName":"MRI Test"},{"PkgServiceId":107,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":69,"ServiceName":"HB, TLC & DLC, EDTA WHOLE BLOOD"}] ;
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
      <li ng-repeat="x in package">
        {{ x.ServiceName }}
        
      </li>
    </ul>
<p>Above is the total data set without filtering.</p>
<ul>
  <li ng-repeat="x in package| filter :{PkgServiceId: null}">
    {{ x.ServiceName }}
    {{ x.PkgServiceId }}
    
  </li>
</ul>

</div>



<p>This example displays only the packages containing the packageId "null".</p>

</body>
</html>
0

сделать функции и объединить с 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");  
 };

Explaination: если не имя фильтра, то отобразить все студенты еще фильтр по имени ввода и пол как "мальчик"

вот демо как использовать и оператор в Примере AngularJs

-1