ng-repeat 내에서 필터를 동적으로 비활성화하는 방법

스테판

체크 박스를 사용하여 필터를 제거 할 수 있습니까?

확인란을 선택하면 ng-repeat 내부의 필터가 비활성화됩니다. 체크 박스의 경우 예를 들어, countryfilterwinetypefilter이 선택되어, 관련 필터를 사용할 수있을 것이다.

원본 코드 (필터 활성화 됨)

<li ng-repeat="wine in wines | winetypefilter:winetypes| countryfilter:countrytypes | stylefilter:styletypes">
                {{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
</li>

(필터는 체크 박스로 사용할 수 countryfilterwinetypefilter 초래)

<li ng-repeat="wine in wines | stylefilter:styletypes">
            {{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
</li>
포이 라즈 일 마즈

물론 필터 비활성화를 동적으로 활성화 할 수 있습니다 ... 내 마음에 오는 가장 간단한 해결책은 필터가 활성화되었는지 여부를 확인하기 위해 부울로 세 번째 매개 변수를 보내는 것입니다.

여기 필터 샘플입니다 ...

app.filter('winetypefilter', function () {
  return function(input, filter, isEnable) {
    // if isEnable then filter out wines
    if (isEnable) {
      var result = [];
      angular.forEach(input, function (wine) {
          angular.forEach(filter, function (isfiltered, type) {
              if (isfiltered && type === wine.type) {
                  result.push(wine);
              }
          });
      });
      return result;
    } 
    // otherwise just do not any filter just send input without changes
    else{
      return input
    }
  };
});

그리고 여기 PLUNKER입니다 ...

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Django에서 양식의 입력 필드를 동적으로 비활성화 / 활성화하는 방법

분류에서Dev

Django에서 양식의 입력 필드를 동적으로 비활성화 / 활성화하는 방법

분류에서Dev

Angular에서 ng repeat의 요소를 필터링하는 방법

분류에서Dev

ng-repeat에서 텍스트 상자를 활성화하는 방법

분류에서Dev

DatePicker에서 날짜를 동적으로 비활성화하는 방법-Knockout

분류에서Dev

ng-repeat 내부의 양식으로 생성 된 테이블에서 데이터를 보내는 방법

분류에서Dev

주문에서 동적으로 생성 된 콤보 박스를 비활성화 / 활성화하는 방법

분류에서Dev

Angular JS에서 동적으로 유효성 검사를 활성화 / 비활성화하는 방법

분류에서Dev

ng-repeat Angular JS에서 또는 조건으로 두 개의 필터를 추가하는 방법

분류에서Dev

Windows 8에서 필터 키를 영구적으로 비활성화하는 방법은 무엇입니까?

분류에서Dev

ng-repeat에서 수평으로 데이터를 추가하는 방법

분류에서Dev

web.xml에서 조건부로 필터를 활성화 / 비활성화하는 방법

분류에서Dev

Angular ng-repeat에서 범주 키로 배열의 객체를 필터링하는 방법

분류에서Dev

Angular ng-repeat에서 범주 키로 배열의 객체를 필터링하는 방법

분류에서Dev

JavaScript에서 orderBy 필터로 ng-repeat를 실행하는 방법은 무엇입니까?

분류에서Dev

ng-repeat에서 ng-model을 동적으로 업데이트하는 방법은 무엇입니까?

분류에서Dev

ng-repeat에서 필터를 사용하는 방법은 무엇입니까?

분류에서Dev

AngularJS : ng-repeat 내에서 $ index를 사용하는 방법

분류에서Dev

ng에 대한 특정 변수를 대상으로 함수를 작성하는 방법은 내부 ng 반복을 비활성화합니까?

분류에서Dev

div를 동적으로 비활성화 및 활성화하는 방법

분류에서Dev

Django에서 쿠키를 수동으로 비활성화하는 방법

분류에서Dev

AngularJs 지시문 : ng-repeat 요소에 속성을 동적으로 설정하는 방법

분류에서Dev

ng-repeat 및 필터를 사용하여 동적 테이블에서 일부 열을 숨기는 방법은 무엇입니까?

분류에서Dev

Angularjs-한 자식 div의 크기가 ng-repeat로 동적으로 증가 할 때 자식 div에 대해 동일한 높이를 갖는 방법

분류에서Dev

Python 스크립트에서 Tornado Auth를 동적으로 활성화 / 비활성화하는 방법은 무엇입니까?

분류에서Dev

Kedro에서 로그를 비활성화하는 방법

분류에서Dev

Linux에서 NCQ를 (정말로) 비활성화하는 방법

분류에서Dev

Eclipse에서 콘솔 로그를 비활성화하는 방법

분류에서Dev

Swift Playground에 대한 결과 활성화를 자동으로 비활성화하는 방법

Related 관련 기사

  1. 1

    Django에서 양식의 입력 필드를 동적으로 비활성화 / 활성화하는 방법

  2. 2

    Django에서 양식의 입력 필드를 동적으로 비활성화 / 활성화하는 방법

  3. 3

    Angular에서 ng repeat의 요소를 필터링하는 방법

  4. 4

    ng-repeat에서 텍스트 상자를 활성화하는 방법

  5. 5

    DatePicker에서 날짜를 동적으로 비활성화하는 방법-Knockout

  6. 6

    ng-repeat 내부의 양식으로 생성 된 테이블에서 데이터를 보내는 방법

  7. 7

    주문에서 동적으로 생성 된 콤보 박스를 비활성화 / 활성화하는 방법

  8. 8

    Angular JS에서 동적으로 유효성 검사를 활성화 / 비활성화하는 방법

  9. 9

    ng-repeat Angular JS에서 또는 조건으로 두 개의 필터를 추가하는 방법

  10. 10

    Windows 8에서 필터 키를 영구적으로 비활성화하는 방법은 무엇입니까?

  11. 11

    ng-repeat에서 수평으로 데이터를 추가하는 방법

  12. 12

    web.xml에서 조건부로 필터를 활성화 / 비활성화하는 방법

  13. 13

    Angular ng-repeat에서 범주 키로 배열의 객체를 필터링하는 방법

  14. 14

    Angular ng-repeat에서 범주 키로 배열의 객체를 필터링하는 방법

  15. 15

    JavaScript에서 orderBy 필터로 ng-repeat를 실행하는 방법은 무엇입니까?

  16. 16

    ng-repeat에서 ng-model을 동적으로 업데이트하는 방법은 무엇입니까?

  17. 17

    ng-repeat에서 필터를 사용하는 방법은 무엇입니까?

  18. 18

    AngularJS : ng-repeat 내에서 $ index를 사용하는 방법

  19. 19

    ng에 대한 특정 변수를 대상으로 함수를 작성하는 방법은 내부 ng 반복을 비활성화합니까?

  20. 20

    div를 동적으로 비활성화 및 활성화하는 방법

  21. 21

    Django에서 쿠키를 수동으로 비활성화하는 방법

  22. 22

    AngularJs 지시문 : ng-repeat 요소에 속성을 동적으로 설정하는 방법

  23. 23

    ng-repeat 및 필터를 사용하여 동적 테이블에서 일부 열을 숨기는 방법은 무엇입니까?

  24. 24

    Angularjs-한 자식 div의 크기가 ng-repeat로 동적으로 증가 할 때 자식 div에 대해 동일한 높이를 갖는 방법

  25. 25

    Python 스크립트에서 Tornado Auth를 동적으로 활성화 / 비활성화하는 방법은 무엇입니까?

  26. 26

    Kedro에서 로그를 비활성화하는 방법

  27. 27

    Linux에서 NCQ를 (정말로) 비활성화하는 방법

  28. 28

    Eclipse에서 콘솔 로그를 비활성화하는 방법

  29. 29

    Swift Playground에 대한 결과 활성화를 자동으로 비활성화하는 방법

뜨겁다태그

보관