itsource

AngularJS 필터 완전 일치

mycopycode 2023. 3. 8. 21:10
반응형

AngularJS 필터 완전 일치

항목 목록을 범주별로 필터링해야 합니다.사용자가 버튼을 클릭하여 목록에 필터를 적용했으면 합니다.

지금은 어느 정도 일을 하고 있습니다.

예를 들어 다음과 같이 렌더링된 영화 목록이 있다고 가정해 보겠습니다.

<li ng-repeat="movie in movieList | filter:filters">{{ movie.title }}</li>

또한 다음과 같이 렌더링된 동영상 장르 목록(버튼으로 렌더링되어 클릭하면 동영상 목록이 필터링됩니다)도 있습니다.

<li ng-repeat="genre in genres">
    <a ng-click="filters.genre = genre.name" ng-click='changeGenre(genre.name)'>{{genre.name}}</a>
</li>

('change Genre()' 함수는 스코프를 갱신하여 현재 보고 있는 장르를 표시합니다).

제가 '액션'과 '액션 어드벤처'의 두 가지 장르를 가지고 있다고 가정할 때까지 이 작업은 잘 진행됩니다.액션이라는 장르의 영화를 기준으로 필터링을 하면 액션 영화뿐만 아니라 액션 어드벤처 영화 목록도 나옵니다.

필터를 사용해서 정확한 일치를 얻을 수 있는 방법이 있나요?

이 기능은 필터 내에서 기본적으로 제공됩니다.필터에 true를 전달하기만 하면 엄밀한 매칭을 할 수 있습니다.

<li ng-repeat="movie in movieList | filter : filters : true">{{ movie.title }}</li>

참조

https://docs.angularjs.org/api/ng/filter/filter

https://stackoverflow.com/a/18243147/1466430

JavaScript 측에서 필터를 사용하고 싶은 경우 다음과 같이 할 수 있습니다.

$scope.filtered = $filter('filter')($scope.movieList, { genre.name: filters.genre}, true);

마지막에는 진실을 알아채고...는, 가 정확한 일치를 검색하는 것을 나타내고 있습니다.

filter에서는, 독자적인 필터를 실장할 수 있는 기능도 사용할 수 있습니다.http://plnkr.co/edit/v0uzGS?p=preview에서 동작하고 있는 플런커를 만들었습니다.

관련 코드는 다음과 같습니다.

$scope.ChooseGenreFunction = function(genre) {
  $scope.filters = function(movie) {
    return movie.genre === genre;
  };
};
$scope.ChooseGenreString = function(genre) {
  $scope.filters = genre;
};

언급URL : https://stackoverflow.com/questions/17480526/angularjs-filter-exact-match

반응형