Eval() 없이 AngularJS에서 여러 값을 필터링하는 방법은 무엇입니까?

AngularJS에서 여러 값 필터링

AngularJS는 강력한 필터 기능을 제공하지만 논리 OR 연산자를 사용하여 여러 값을 필터링하는 것은 복잡할 수 있습니다. 잠재적으로 위험한 eval() 호출을 사용하지 않고 여러 값을 동적으로 필터링하는 방법을 살펴보겠습니다.

동적 다중 값 필터링을 구현하려면 사용자 정의 필터를 만드는 것이 좋습니다. 필터는 생성하기 쉽고 AngularJS의 필터링 기능을 확장하는 안전하고 효율적인 방법을 제공합니다.

<code class="javascript">angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies, genres) {
      var out = [];
      for (var i = 0; i < movies.length; i++) {
        var movie = movies[i];
        if (genres.indexOf(movie.genre) !== -1) {
          out.push(movie);
        }
      }
      return out;
    }
  });

'bygenre'라는 이름의 이 사용자 정의 필터는 영화(필터링할 데이터)라는 두 가지 매개변수를 사용합니다. 및 장르(필터링할 장르의 배열)입니다. 필터는 지정된 장르에 대해 각 영화를 확인하고 장르와 일치하는 영화만 포함하는 새 배열을 반환합니다.

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

<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에서 데이터를 동적으로 필터링하는 유연하고 안전한 방법을 제공하므로 별도의 입력 없이 여러 값을 쉽게 검색할 수 있습니다. 성능이나 보안이 저하됩니다.

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