angularJS의 컨트롤러에서 '필터'사용

Question

이 피들을 검토하십시오. 컨트롤러에서 '필터'를 사용하려고합니다. 단추로 연결된 텍스트 상자에 제공된 검색 기준을 기반으로 검색하려는 데이터 배열이 있습니다.

사용자가 텍스트를 입력 한 다음 Enter 키를 눌러 검색합니다. 사용자가 텍스트 상자에서 뒤로 키를 누르면 원래 목록이 다시 나타납니다.

필자는 컨트롤러에서 필터를 적용하고 싶습니다. 그래서 나는 가지고있는 것들과 일해야한다.

상담하십시오.

<div ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
<input type='text' data-ng-model='search'> 
    <button ng-click='newList()'> </button> 
     <table> <tr data-ng-repeat= "item in items"><td> {{item.name}} </td></tr></table>  

    </div> 
</div> 



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


function MyCtrl($scope, $filter) { 
    $scope.items= [ 
    { 
    id: 0, 
    name: "Noman", 
    email: "John@email.com"}, 
{ 
    id: 1, 
    name: "Sameer", 
    email: "James@email.com"}, 
{ 
    id: 2, 
    name: "Humair", 
    email: "Jill@email.com"} 
];  

$scope.newList = function() { 
$scope.items = $filter('filter')($scope.items,'name',$scope.search) 
    } 
} 

http://jsfiddle.net/r7KH7/66/

Answer 1

는 당신은 당신이 필터와 필터를 적용 할 필요가있는에 따라 값을 필요로하는 속성 객체를 전달하여 개체 속성을 기준으로 필터링 할 수 있습니다.

는

따라서, 귀하의 경우, 필터 매개 변수입니다 :

{ 
    name: $scope.search 
} 

당신은 다음과 같이 컨트롤러에 이것을 사용할 수 있습니다

:

$scope.newList = function() { 
    $scope.newItems = $filter('filter')($scope.items,{name: $scope.search}) 
}; 

주 - 표시하기 위해 다른 배열을 사용합니다 필터를 적용한 후에도 이전 내용을 새 값으로 필터링해야하기 때문에 원래 배열이 아닌 뷰에 표시됩니다.

이것은 원래 항목 목록 $scope.items을 사용하는 대신 ng-repeat 지시문에 $scope.newItems을 사용한다는 것을 의미합니다. 여기

참조 바이올린 : 모든 http://jsfiddle.net/M4yRv/

Answer 2

첫째, 당신은 필터링 항목을 포함, 추가적인 배열을해야하고,이에 반복해야합니다. 당신이 그들의 이름 속성을 기준으로 항목을 필터링 할 때문에

둘째, 필터의 두 번째 인수는

{name: $scope.search} 

을해야합니다. 여기

은 예를 들어, 작업입니다 : http://jsfiddle.net/r7KH7/67/