prosource

Angular JS - 새로 고침 ng 반복

probook 2023. 2. 16. 21:53
반응형

Angular JS - 새로 고침 ng 반복

ng-repeat을 사용하여 값 컬렉션을 표시합니다.필터 옵션은 서버에 대한 Ajax 호출에 따라 달라집니다.필터 파라미터를 수신한 후 ng-repeat을 갱신하려면 어떻게 해야 합니까?

만지작거리다

템플릿

<div>
<div data-ng-controller="myCtrl">
    <ul>
        <li data-ng-repeat="item in values | filter:filterIds()"> 
            <code>#{{item.id}}</code> Item
        </li>
    </ul>
   </div>
 </div> 
<button ng-click="loadNewFilter()"> filter now</button>

각진

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

app.controller('myCtrl', function ($scope) {
  $scope.values = [
   {id: 1},
   {id: 2},
   {id: 3},
   {id: 4},
   {id: 5},
   {id: 6}
  ];

  $scope.filter = [1,2,3,4,5,6];

  $scope.filterIds = function (ids) {
        return function (item) {
            var filter = $scope.filter;
            return filter.indexOf(item.id) !== -1;          
        }
  }

  $scope.loadNewFilter = function (){
    $scope.filter = [1,2,3];      
   }
});

각도에 값이 변경되었음을 알려야 합니다.

$scope.loadNewFilter = function (){
    $scope.filter = [1,2,3];      
    $scope.$apply();
}

배치했습니다.<button ng-click="loadNewFilter()"> filter now</button>컨트롤러 범위를 벗어납니다.

제 경우 ng-repeat에 트랙바이(TrackBy)가 있어서 업데이트하기 위해 삭제해야 했습니다.

$scope라는 필터를 받은 후.$syslog()는 다음과 같습니다.스코프를 갱신합니다.

$scope.$apply(function() {
     // your code
});

업데이트를 보기 위해 $scope.apply()를 사용할 필요가 없었습니다.이 오류를 해결한 것은 다음 사항을 확인하는 것이었습니다.

  1. 컨트롤러 내부에서 업데이트를 호출하고 있었습니다.
  2. 업데이트를 호출한 컨트롤러는 ng-repeat이 포함된 컨트롤러와 동일합니다.

언급URL : https://stackoverflow.com/questions/25843515/angularjs-refresh-ng-repeat

반응형