AngularJS-ngRepeat 필터링 된 결과 참조를 얻는 방법


129

필터와 함께 ng-repeat 지시문을 사용하고 있습니다.

ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4"

렌더링 된 결과를 잘 볼 수 있습니다. 이제 컨트롤러에서 그 결과에 대한 논리를 실행하고 싶습니다. 문제는 결과 항목 참조를 어떻게 얻을 수 있습니까?

최신 정보:


명확히하기 위해 : 자동 완성을 만들려고 하는데이 입력이 있습니다.

<input id="queryInput" ng-model="query" type="text" size="30" placeholder="Enter query">

그런 다음 필터링 된 결과 :

<ul>
   <li  ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4">{{item.name}}</li>
</ul>

이제 결과를 탐색하고 항목 중 하나를 선택하고 싶습니다.

답변:


270

업데이트 : 여기에 이전보다 쉬운 방법이 있습니다.

 <input ng-model="query">
 <div ng-repeat="item in (filteredItems = (items | orderBy:'order_prop' | filter:query | limitTo:4))">
   {{item}}
 </div>

그런 다음 $scope.filteredItems액세스 할 수 있습니다.


답장을 보내 주셔서 감사합니다. 내 업데이트를 참조하십시오. 어떻게 구현
하겠습니까?

정말 멋지다. 고마워. 나는 그것이 NG의 내장 된 기능 이었으면 좋겠다
Shlomi Schwartz

3
이 접근 방식의 문제점은 할당 된 속성을 볼 경우 스팸 반복 $ digests (반복 당 한 번)로 끝나는 것입니다. 이것을 피할 수있는 방법이 있습니까?
Juho Vepsäläinen

1
검색 객체와 console.log를 filteredItems보면 항상 하나의 필터 후에 데이터를 얻습니다. 방금 변경된 필터의 결과가 아니라 이전 변경의 필터 결과입니다. 어떤 아이디어?
ProblemsOfSumit

4
누군가 나를 설명 할 수 있는데 왜 이것이 효과가 있습니까? $ scope의 변수는 반복 범위 (범위 상속)에서 액세스 할 수 있지만 다른 방법으로 액세스 할 수 있음을 이해할 수 있습니다. 어떻게? 일부 문서는 높이 평가됩니다. 감사합니다
dalvarezmartinez1

30

Andy Joslin 솔루션의 필터 버전은 다음과 같습니다.

업데이트 : BREAKING CHANGE. 버전 1.3.0-beta.19 ( 이 commit ) 필터에는 컨텍스트 this가 없으며 전역 범위에 바인딩됩니다. 컨텍스트를 인수로 전달하거나 ngRepeat , 1.3.0-beta.17 + 의 새로운 앨리어싱 구문을 사용할 수 있습니다 .

// pre 1.3.0-beta.19
yourModule.filter("as", function($parse) {
  return function(value, path) {
    return $parse(path).assign(this, value);
  };
});

// 1.3.0-beta.19+
yourModule.filter("as", function($parse) {
  return function(value, context, path) {
    return $parse(path).assign(context, value);
  };
});

그럼 당신의 관점에서

<!-- pre 1.3.0-beta.19 -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:'filteredItems'">
 {{item}}
</div>

<!-- 1.3.0-beta.19+ -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:this:'filteredItems'">
 {{item}}
</div>

<!-- 1.3.0-beta.17+ ngRepeat aliasing -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 as filteredItems">
 {{item}}
</div>

에 액세스 할 수 $scope.filteredItems있습니다.


감사! 필터 코드 작동 방식을 설명해 주시겠습니까? 나는 $ parse에 익숙하지 않으며 각도 문서는 필터가 어떻게 작동하는지 해독하는 데 도움이되지 않았습니다.
Magne

2
@Magne 문제 없습니다! 약간의 고통과 길을 잃을 수 있으므로 업데이트를 확인하십시오. 간단히 말해 $parseAngular의 식 컴파일러입니다 . 예를 들어 문자열 'some.object.property'를 사용하여 지정된 경로에 대해 지정된 경로에서 값을 설정하거나 가져올 수있는 함수를 반환합니다. 문맥. 특히 $ scope에서 필터 결과를 설정하는 데 사용하고 있습니다. 이것이 귀하의 질문에 답변되기를 바랍니다.
kevinjamesus86

23

ng-repeat의 문제점은 액세스 할 수 없기 때문에 자식 범위를 생성한다는 것입니다.

필터

컨트롤러에서

<li ng-repeat="doc in $parent.filteritems = (docs | filter:searchitems)" ></li>

16

최신 정보:

1.3.0 이후에도. 당신이 컨트롤러 또는 부모의 범위에 넣어하려는 경우 당신이 함께 할 수 없어 같은 구문. 예를 들어 다음 코드가있는 경우 :

<div>{{labelResults}}</div>
<li ng-repeat="label in (labels | filter:query | as labelResults)">
</div>

위의 작동 하지 않습니다 . 그것을 해결하는 방법은 $ parent를 다음 과 같이 사용하는 것입니다 .

<li ng-repeat="label in ($parent.labelResults = (labels | filter:query))">

limitTo 필터가있는 경우 참고하십시오. $ parent.labelResults
Zack

console.log labelResults내가 항상 하나의 필터 후에 데이터를 얻는 다면 . 방금 변경된 필터의 결과가 아니라 이전 변경의 필터 결과입니다. 이 문제가 없었습니까?
Anna

10

앤디 솔루션의 다소 나은 버전을 생각해 냈습니다. 그의 솔루션에서 ng-repeat는 과제가 포함 된 표현식을 감시합니다. 각 다이제스트 루프는 해당 표현식을 평가하고 결과를 범위 변수에 할당합니다.

이 솔루션의 문제점은 하위 범위에있는 경우 할당 문제가 발생할 수 있다는 것입니다. 이것은 ng-model에 점이 있어야하는 이유와 같습니다 .

이 솔루션에 대해 내가 싫어하는 다른 점은 뷰 마크 업 어딘가에 필터링 된 배열의 정의를 묻는다는 것입니다. 뷰 또는 컨트롤러의 여러 위치에서 사용하는 경우 혼동 될 수 있습니다.

더 간단한 해결책은 컨트롤러에 시계를 배치하는 기능에 배치하는 것입니다.

$scope.$watch(function () {
    $scope.filteredItems = $scope.$eval("items | orderBy:'order_prop' | filter:query | limitTo:4");
});

이 기능은 각 다이제스트주기 동안 평가되므로 성능은 Andy의 솔루션과 비슷해야합니다. 또한 함수에 여러 개의 할당을 추가하여 뷰에 대해 흩어져 있지 않고 한 곳에 보관할 수 있습니다.

보기에서 필터링 된 목록을 직접 사용하면됩니다.

<ul>
    <li  ng-repeat="item in filteredItems">{{item.name}}</li>
</ul>

더 복잡한 시나리오에서 이것이 표시되는 바이올린이 있습니다.


매우 깨끗하고 구조를 오염시키지 않습니다.
kuzyn

이 솔루션은 저에게 완벽합니다. .i가 ng 반복 대신에 이온 수집 반복을 사용하고있었습니다. 이것이 수용된 답변이 저에게 효과가없는 이유
Lakshay

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.