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

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

다음과 같이 필터에 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>

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

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

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

그리고나서$scope.filteredItems액세스 할 수 있습니다.

이것은 Andy Joslin의 솔루션의 필터 버전입니다.

업데이트: BREAKING CHANGE. 버전 1.3.0-beta.19(이 커밋) 이후 필터에는 컨텍스트가 없습니다.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.

이와 같은 것을 시도해 보세요.ng-repeat의 문제는 접속할 수 없기 때문에 아이 스코프가 생성된다는 것입니다.

필터 항목

컨트롤러에서

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

업데이트:

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))">

나는 앤디의 해결책에 대해 좀 더 나은 버전을 생각해냈다.그의 솔루션 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>

여기 좀 더 복잡한 시나리오에서 보여지는 바이올린이 있습니다.

다음 답변을 확인하십시오.

ng-repeat 항목 선택 및 액세스

<li ng-repeat="item in ..." ng-click="select_item(item)">

언급URL : https://stackoverflow.com/questions/11721863/angularjs-how-to-get-an-ngrepeat-filtered-result-reference