각도 필터를 조건부로 만들기

각도 필터를 조건부로 만들기

---

현재 항목 목록을 필터링하기 위해 텍스트 입력을 사용하고 있습니다. 특정 변수가 설정되면 텍스트 입력에 관계없이 목록이 필터링되지 않도록 만들고 싶습니다. 이 작업을 수행하는 방법에 대한 조언이 있습니까?

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

---

필터 표현식을 ''(또는 undefined) 로 설정하면이 작업을 수행 할 수 있습니다.이 경우 필터가 적용되지 않습니다 disableFilter.

따라서이 토글 변수-- disableFilter는 부울 이라고 가정합니다 .

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

( filterExpression필터링하려는 표현식이 무엇이든). 구체적인 사례는 다음과 같습니다.

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

편집하다:

위의 작동 방식을 설명합니다.

1. 그 기억 ||과 &&피연산자 중 하나의 값을 반환합니다.
2. ||및 &&단락 회로 평가를 사용 - true || (anything)반환 true; false && (anything)반환 false- (anything)표현식 을 평가하지 않고 .
3. ''거짓입니다 (또는 undefined더 명확하다면 대신 사용 )

그래서

때 disableFilter === true, !disableFilter === false의, 따라서 두 번째 피연산자 ||- 빈 문자열 ''- 평가 (그것은 falsy이다), 그리고 (!disableFilter || '')반환 ''- falsy 가치를 단락 &&운영과의 두 번째 피연산자를 평가하지 않습니다 &&. 따라서 표현식의 반환 값은 ''입니다.

때 disableFilter === false, !disableFilter === true,를 단락하는 ||동작은 다음의 두 번째 피연산자 &&평가 반환된다. 따라서 표현식의 반환 값은 {value: search}입니다.

여기에서 논리 연산자 에 대해 자세히 알아 보세요.

---

다음은 약간 덜 까다로운 해결책이라고 생각합니다. 까다로운 솔루션은 미래 개발자에게 버그를 유발합니다.

내 제안은 다음과 같습니다.

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

또는

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

간단히, shouldFilter이면 필터 표현식을 제공하고, 그렇지 않으면 아무것도 제공하지 마십시오. 간단한 삼항 표현식을 사용하면 가독성이 더 쉽습니다.

---

어쩌면 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>

그게 해결책 인 것 같습니다 .

---

내가 한 일은 다음과 같습니다. 먼저, 컨트롤러에서 채워진 선택 컨트롤이 있으며 길이가 0 인 문자열 값이있는 하나의 정적 항목 (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}">

---

나는 복잡한 사건이 있었다

• 기록 목록에 제품이라고 말하십시오
• 다른 두 특성별로 필터 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를 사용하여 레코드 수를 사용할 수도 있습니다.

---

다음 솔루션이 더 쉽고 효과적이라는 것을 알았습니다.

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.package=[{"PkgServiceId":null,"PkgServicesName":" HB, TLC, DLC & 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 & 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>

---

함수를 만들고 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");  
 };  

설명 : 이름을 필터링하지 않으면 모든 학생을 표시하고 입력 된 이름과 성별을 'boy'로 필터링합니다.

다음은 AngularJs 예제에서 사용하는 방법 및 연산자 데모입니다.

참고URL : https://stackoverflow.com/questions/29738014/making-an-angular-filter-conditional