javascript - 앵귤러5 AngularJS : 전체 DOM 트리를 재구성하지 않고 동적 목록으로 반복?


1 Answers

나는이 기사에서 ngRepeat가 어떻게 작동하는지 설명 할 것이다.

http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm

그래서 객체를 콜렉션에 보관한다면 - 예 (즉, $ hashKey persist)

그렇지 않으면 - 아니요

앵귤러6

서버에서 검색 한 JSON 배열의 데이터가있는 테이블 행에서 ng-repeat를 사용하고 있습니다. 내 목표는 수정되지 않은 항목에 영향을주지 않고 항목이 서버에서 추가, 제거 또는 수정 될 때마다 자동으로 목록을 업데이트하는 것입니다. 마지막 구현에서이 테이블 행에는 양방향으로 바인딩 된 <input><select> 요소가 포함되어 업데이트를 서버로 다시 보냅니다. <select> 요소에서 사용 가능한 옵션 중 일부는 변경 될 수있는 다른 목록의 ng-repeat 지시문을 사용하여 생성됩니다.

지금까지 서버에서 새 배열을 가져올 때마다 (현재 2 초마다 폴링 됨) 전체 ng-repeat 목록이 삭제되고 다시 생성됩니다. 이는 텍스트 선택을 방해하고 사용자가 현재 편집중인 경우에도 입력 필드를 파괴하며 필요 이상으로 느리게 실행되기 때문에 문제가됩니다.

jQuery와 DOM 조작을 사용하여 원하는 것을 수행하는 다른 웹 응용 프로그램을 작성했지만 코드가 실제로 털이 없어지고 개발에 많은 시간이 소요됩니다. 저는 AngularJS와 데이터 바인딩을 사용하여 코드와 시간의 일부분만으로이 작업을 수행하기를 희망합니다.

여기에 질문이 있습니다. 이 방법으로 배킹 배열을 업데이트 할 수 있습니까? 실제로 변경된 항목 / 속성에 해당하는 DOM 요소 만 수정하면됩니까?

다음은 타이머에서 하드 코딩 된 배열을 사용하여 주기적으로 폴링을 시뮬레이트하는 최소 테스트 케이스입니다 ( http://jsfiddle.net/DWrmP/ 에서 볼 수 있음). 요소가 삭제되고 다시 만들어지기 때문에 텍스트 선택이 500ms마다 지워집니다.

HTML

<body ng-app="myApp">
    <table ng-controller="MyController">
        <tr ng-repeat="item in items | orderBy:'id'">
            <td>{{item.id}}</td>
            <td>{{item.data}}</td>
        </tr>
    </table>
</body>

자바 스크립트

angular.module('myApp', []).controller(
    'MyController', [
        '$scope', '$timeout',
        function($scope, $timeout) {
            $scope.items = [
                { id: 0, data: 'Zero' }
            ];

            function setData() {
                $scope.items = [
                    { id: 1, data: 'One' },
                    { id: 2, data: 'Two' },
                    { id: 5, data: 'Five' },
                    { id: 4, data: 'Four' },
                    { id: 3, data: 'Three' }
                    ];
                $timeout(setData, 500);
            }
            $timeout(setData, 500);
        }
        ]
);


Related