AngularJS와 배열은

내가 dataController, 두 서비스라는 컨트롤러, dataHttpServices 및 dataLocalServices 및 HTML 템플릿, 일부 지침라는 이름이 템플릿에 바인딩하지.AngularJS와 배열은

내 HTML 템플릿에는 두 개의 다른 탭에서 동일한 컨트롤러를 사용하고 두 곳의 컨트롤러에서 목록에 항목을 추가했습니다.

디버그 모드에서 데이터가 올바르게 변경되었지만 데이터 바인딩이 제대로 작동하지 않습니다.

나는 잘 모르겠다. 내 실수는 무엇입니까, 도와주세요. 코드에서;

여기 Html입니다.

<div 
    class="metadataSelect" 
    layout="column" 
    ng-model="selectedItems" 
    ng-show="selectedItems.length > 0">         
    <div layout="row" ng-repeat="item in selectedItems"> 
     {{item.Name}} 
    </div> 
</div>

컨트롤러는 다음과 같습니다.

$scope.addSelectedItem = function (selectedItem) { 
    var found = false; 
    var self = this; 

    dataLocalService.addSelectedItem(selectedItem); 
    $scope.selectedItems = dataLocalService.getSelectedItems(); 
};

여기 서비스가 있습니다.을 NG 클릭

this.selectedItems = []; 

this.addSelectedItem = function (item) { 
    this.selectedItems.push(item); 
}; 

this.getSelectedItems = function() { 
    return this.selectedItems; 
};

나는 와 함께 두 개의 서로 다른 버튼의 클릭 이벤트의 범위에서 addSelectedItem를 호출합니다.

첫 번째 버튼을 클릭하고 두 번째 버튼 (첫 번째 버튼을 먼저 클릭)을 클릭하여 항목을 추가하면 단추가 배열을 올바르게 바인딩합니다.

하지만 첫 번째 버튼을 클릭하기 전에 두 번째 버튼을 클릭하여 항목을 추가하면 배열이 div에 바인딩되지 않습니다.

두 번째 버튼을 클릭하여 배열에 항목을 추가 한 후 첫 번째 버튼을 클릭하면 div에 모든 요소를 바인딩합니다. 예를 들어 한 번에 세 개의 요소가 있지만 첫 번째 버튼을 클릭하지 않으면 바인딩되지 않습니다.

내 실수는 무엇입니까? 도움을 주셔서 감사합니다.

출처

2016-06-01 Vecihi Baltacı

코드의 스 니펫 만 표시하면 컨텍스트 (컨트롤러에서 '자체', 서비스에서 '이')를 식별하기가 어렵습니다. 문제의 근원이 보이지 않는 코드에있을 가능성이 큽니다. 관련 코드를 모두 제공해주십시오 ... plunker가 정말 좋을 것입니다. – jbrown

div의 "metadataSelect "에 왜 'ng-model ="selectedItems "가 있습니까? –

GabrielHobold가 말한 것과 왜'$ scope.addSelectedItem' 안에'$ scope.selectedItems = dataLocalService.getSelectedItems();'를 유지합니까? – apieceofbart

$ scope. $ watch을 사용하여 해결했습니다. 그리고 나는 문제가 자신의 범위가 다르다고 생각합니다. 왜냐하면 컨트롤러를 두 번 컨트롤러를 두번 만들었 기 때문입니다. ng-controller. 여기에 그것을 해결하기 위해 찾은 코드 스 니펫이 있습니다.

$scope.$watch('selectedItems', function() { 
    $scope.selectedItems = $metadataLocalService.getSelectedItems(); 
});

내 문제가 해결되었습니다. 시계가 관련 데이터 변경 등을 추적하기 때문에

출처

2016-06-02 07:23:24

AngularJS와 배열은

답변

관련 문제