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 ( 이 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있습니다.

---

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>

the above will not work. The way to go around it is using the $parent as so:

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

---

I came up with a somewhat better version of Andy's solution. In his solution ng-repeat places a watch on the expression that contains the assignment. Each digest loop will evaluate that expression and assign the result to the scope variable.

The problem with this solution is that you might run into assignment issues if you are in a child scope. This is the same reason why you should have a dot in ng-model.

The other thing I don't like about this solution is that it buries the definition of the filtered array somewhere in the view markup. If it is used in multiple places in your view or your controller it can get confusing.

A simpler solution is to just place a watch in your controller on a function that makes the assignment:

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

This function will be evaluated during each digest cycle so performance should be comparable with Andy's solution. You can also add any number of assignments in the function to keep them all in one place rather than scattered about the view.

In the view, you would just use the filtered list directly:

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

Here's a fiddle where this is shown in a more complicated scenario.

---

Check this answer:

Selecting and accessing items in 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