[angularjs] AngularJS의 여러 특정 모델 속성으로 필터링 (OR 관계)

Program / 글쓴이

http://docs.angularjs.org/api/ng.filter:filter 에서 예제를 살펴보십시오.

을 사용하여 전화 속성으로 <input ng-model="search">검색 할 수 있으며을 사용하여 이름으로 만 검색 할 수 <input ng-model="search.name">있으며 결과는 이름별로 적절하게 필터링됩니다 (전화 번호를 입력해도 예상대로 결과가 반환되지 않음).

하자 내가, 내가 어떻게에 의해 필터링에 대해 갈 것 “이름”속성,에 “전화”속성, 그리고 “비밀”속성을 가진 모델이 있다고 모두 “전화”속성과 “이름”을 하지 은 “비밀”속성을 ? 따라서 본질적으로 사용자는 이름이나 전화 번호를 입력 할 수 ng-repeat있으며은 올바르게 필터링되지만 사용자가 “비밀”값의 일부와 동일한 값을 입력하더라도 아무것도 반환하지 않습니다.

감사.

답변

여기 플런 커가 있습니다

더 깔끔한 코드와 쿼리 및 검색 목록 항목 모두 대소 문자를 구분하지 않는 새로운 플 런커

주요 아이디어는 이러한 목적을 달성하기 위해 필터 기능을 만드는 것입니다.

에서 공식 문서

function : 술어 함수를 사용하여 임의의 필터를 작성할 수 있습니다. 이 함수는 배열의 각 요소에 대해 호출됩니다. 최종 결과는 술어가 true를 리턴 한 요소의 배열입니다.

<input ng-model="query">

<tr ng-repeat="smartphone in smartphones | filter: search "> 

$scope.search = function(item) {
    if (!$scope.query || (item.brand.toLowerCase().indexOf($scope.query) != -1) || (item.model.toLowerCase().indexOf($scope.query.toLowerCase()) != -1) ){
        return true;
    }
    return false;
};

최신 정보

어떤 사람들은 실제 성능에 대한 우려를 가질 수 있습니다.

현실 세계에서는 아마도 컨트롤러에서 이런 종류의 필터를 수행 할 것입니다.

수행 방법을 보여주는 세부 게시물 은 다음과 같습니다 .

간단히 말해, ng-change새로운 검색 변경을 모니터링하기위한 입력에 추가 합니다.

그런 다음 필터 기능을 트리거합니다.

답변

API 참조에 설명 된대로 객체를 매개 변수로 필터 표현식에 전달할 수 있습니다 . 이 개체는 다음과 같이 관심있는 속성을 선택적으로 적용 할 수 있습니다.

<input ng-model="search.name">
<input ng-model="search.phone">
<input ng-model="search.secret">
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">

여기 플런 커가 있습니다

주의 …이 예제는 AngularJS 1.1.5에서 잘 작동하지만 항상 1.0.7에서는 잘 작동하지 않습니다. 이 예제에서 1.0.7은 모든 것을 필터링하여 초기화 한 다음 입력 사용을 시작할 때 작동합니다. 공백으로 시작하더라도 입력에 일치하지 않는 값이있는 것처럼 동작합니다. 안정적인 릴리스를 유지하려면 상황에 맞게 시도해보십시오.하지만 일부 시나리오에서는 1.2.0이 릴리스 될 때까지 @maxisam의 솔루션을 사용할 수 있습니다.

답변

나는 @maxisam의 답변에서 영감을 얻어 내 자신의 정렬 기능을 만들었고 그것을 공유하고 싶지만 (심심해서).

상황은
나는 자동차의 배열을 필터합니다. 필터링 할 선택된 속성은 이름, 연도, 가격 및 km입니다. 부동산 가격과 km는 숫자입니다 (따라서 사용 .toString). 또한 대문자를 제어하고 싶습니다 (따라서 .toLowerCase). 또한 필터 쿼리를 다른 단어로 나눌 수 있기를 원합니다 (예 : 필터 2006 Acura가 주어지면 2006 년과 이름이 일치하는 Acura를 찾습니다).

필터에 전달하는 함수

        var attrs = [car.name.toLowerCase(), car.year, car.price.toString(), car.km.toString()],
            filters = $scope.tableOpts.filter.toLowerCase().split(' '),
            isStringInArray = function (string, array){
                for (var j=0;j<array.length;j++){
                    if (array[j].indexOf(string)!==-1){return true;}
                }
                return false;
            };

        for (var i=0;i<filters.length;i++){
            if (!isStringInArray(filters[i], attrs)){return false;}
        }
        return true;
    };

답변

타사 라이브러리를 사용할 수있는 경우 멋진 필터 모음이있는 ‘Angular Filters’가 유용 할 수 있습니다.

https://github.com/a8m/angular-filter#filterby

collection | filterBy: [prop, nested.prop, etc..]: search

답변

이 답변이 도움이되기를 바랍니다. 다중 값 필터

이 바이올린의 작업 예

arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}

답변

여기에는 좋은 해결책이 많이 있지만 이것으로 다른 길을가는 것이 좋습니다. 검색이 가장 중요하고 ‘비밀’속성이 뷰에서 전혀 사용되지 않는 경우; 이에 대한 나의 접근 방식은 모든 이점과 함께 내장 된 각도 필터를 사용하고 단순히 모델을 새로운 객체 배열에 매핑하는 것입니다.

질문의 예 :

$scope.people = members.map(function(member) {
                              return {
                                name: member.name,
                                phone: member.phone
                              }});

이제 html에서는 일반 필터를 사용하여 이러한 속성을 모두 검색합니다.

<div ng-repeat="member in people | filter: searchString">

답변

angularJs에서 filterBy를 사용하는 매우 간단한 접근 방식

작업 plnkr의 경우이 링크를 따르십시오.

http://plnkr.co/edit/US6xE4h0gD5CEYV0aMDf?p=preview

이것은 특별히 단일 속성을 사용하여 여러 열을 검색하지만 전부는 아닙니다.

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script data-require="angular-filter@0.5.2" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl as vm">
  <input type="text" placeholder="enter your search text" ng-model="vm.searchText" />
   <table>
     <tr ng-repeat="row in vm.tableData | filterBy: ['col1','col2']: vm.searchText">
       <td>{{row.col1}}</td>
       <td>{{row.col2}}</td>
       <td>{{row.col3}}</td>
     </tr>
   </table>
   <p>This will show filter from <b>two columns</b> only(col1 and col2) . Not from all. Whatever columns you add into filter array they
   will be searched. all columns will be used by default if you use <b>filter: vm.searchText</b></p>
  </body>
</html>

제어 장치

// Code goes here
(function(){

  var myApp = angular.module('myApp',['angular.filter']);

  myApp.controller('myCtrl', function($scope){
    var vm= this;
    vm.x = 20;

    vm.tableData = [
      {
        col1: 'Ashok',
        col2: 'Tewatia',
        col3: '12'
      },{
        col1: 'Babita',
        col2: 'Malik',
        col3: '34'
      },{
        col1: 'Dinesh',
        col2: 'Tewatia',
        col3: '56'
      },{
        col1: 'Sabita',
        col2: 'Malik',
        col3: '78'
      }
      ];
  })

})();