2013-08-01 3 views
3

나는 AngularJS와 새로운 오전과 그냥 필터링에 대한 도움 ...AngularJS와는

나는 (아주 기본입니다) 필터링의 기초를 이해하지만 내가하고 싶은 여러 표현식을 사용하여 필터입니다 원했다.

HTML : 이제

<body data-ng-init="phones = [{make:'Apple', model:'iPhone5'}, {make:'HTC', model:'One'}, {make:'Samsung', model:'GalaxyS4'}]"> 
    <p>my first angular app</p> 
    <p><label>filter</label><input data-ng-model="phoneFilter.$" type="text"></p> 
    <ul> 
     <li data-ng-repeat="phone in phones | filter:phoneFilter"> 
      {{phone.make}} {{phone.model}} 
     </li> 
    </ul> 
</body> 

내가 그것을 잘 작동하지만 난 입력하면 '사과 i'를 최대한 빨리 필터가 비어 모델 입력을 시작으로 '사과'또는 '아이폰 5'를 필터링합니다.

맞춤 필터를 만들어야합니까? AngularJS와 혼자 추측 할 수 있기 때문에 공간을 의미한다 "또는"고

건배

답변

2

은 적어도 당신은 단순히 필터 filter의 기본 양식을 사용할 수 없습니다.

하지만 직접 지시문을 만들 필요는 없습니다. AngularJS 1.1.5는 filter에 대한 세 번째 매개 변수를 제공합니다 (documentation 참조). 비교할 개체 값과 조건 자 값이 주어지며 항목을 필터링 된 결과에 포함해야하는 경우 true를 반환하는 함수를 사용할 수 있습니다. 그런 다음, 당신이해야 할 모든은 다음과 같습니다

$scope.multipleChoicesComparator = function (expected, actualInCompactForm) 
{ 
    // Get a list of predicates 
    var listActual = actualInCompactForm.split(' '); 
    var mustBeIncluded = false; 

    angular.forEach(listActual, function (actual) 
    { 
     // Search for a substring in the object value which match 
     // one of the predicate, in a case-insensitive manner 
     if (angular.lowercase(expected).indexOf(angular.lowercase(actual)) !== -1) 
     { 
      mustBeIncluded = true; 
     } 
    }); 

    return mustBeIncluded; 
}; 
<li data-ng-repeat="phone in phones | filter:phoneFilter:multipleChoicesComparator"> 
    {{phone.make}} {{phone.model}} 
</li> 

Fiddle

+0

감사하지만, 최대한 빨리 입력 할 때 '난'아직도 필터링 된 결과에서 사라 (사과를 입력 한 후) 아이폰에 . – Adi

+0

그것은, 단지 피들을 시도하지 않습니다. 그러나'filter' 필터의 세 번째 매개 변수는 AngularJS 1.1.3에서 소개되었으므로이 버전을 사용해야합니다. – Blackhole