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

Program / 글쓴이

필터와 함께 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>

위의 작동 하지 않습니다 . 그것을 해결하는 방법은 $ 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)">

답변