여러 값(OR 연산)을 사용하여 AngularJS에서 데이터를 필터링하는 방법은 무엇입니까?

AngularJS에서 다중 값 필터링(OR 연산)

AngularJS에서 데이터 필터링은 맞춤형 콘텐츠를 사용자에게 표시하기 위한 필수 작업입니다. 그러나 여러 기준에 따라 데이터를 필터링해야 하는 경우 OR 연산을 표현하는 것이 어려울 수 있습니다.

이 작업을 수행하려면 여러 값을 기준으로 개체를 필터링해야 합니다. 장르 속성이 있는 객체 영화를 고려하고 "액션" 또는 "코미디" 카테고리에 속하는 영화를 표시하려고 합니다.

filter를 사용하는 동안:({genres: 'Action'} || { 장르: '코미디'})가 가능하지만 변수를 기반으로 동적으로 필터링하려는 경우 번거롭습니다. 이 문제에 접근하는 방법은 다음과 같습니다.

사용자 정의 필터 기능

더 나은 해결책은 사용자 정의 필터 기능을 만드는 것입니다. 사용자 정의 필터는 보다 체계적이고 유지 관리가 쉬운 접근 방식을 제공합니다. 다음과 같이 AngularJS 애플리케이션에서 bygenre라는 필터를 정의할 수 있습니다.

<code class="javascript">angular.module('myFilters', []).filter('bygenre', function() {
  return function(movies, genres) {
    var out = [];
    // Implement filter logic here, adding matches to the out variable.
    return out;
  };
});</code>

템플릿 사용

사용자 정의 필터를 정의한 후에는 다음과 같이 템플릿에서 사용할 수 있습니다.

<code class="html"><h1 ng-init="movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'action'}
       ];">Movies</h1>
<input type="checkbox" ng-model="genrefilters.action" />Action
<br>
<input type="checkbox" ng-model="genrefilters.family" />Family
<br>
{{genrefilters.action}}::{{genrefilters.family}}
<ul>
    <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li>
</ul></code>

템플릿에서 장르 필터 확인란을 전환하여 필터 기준을 동적으로 변경할 수 있습니다. 사용자 정의 필터는 선택한 장르와 일치하는 영화를 자동으로 표시합니다.

추가 탐색

사용자 정의 AngularJS 필터 생성에 대한 자세한 내용은 여기에서 공식 문서를 참조하세요: [Angular 필터 생성] (https://docs.angularjs.org/guide/filter).

위 내용은 여러 값(OR 연산)을 사용하여 AngularJS에서 데이터를 필터링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!