ng-click 지시어를 사용하여 (빈) 스코프 배열에 새 항목 추가

Question

내 스코프에는 생성시 "notYetExistingArray"가 없습니다.

버튼을 통해 배열과 첫 번째 항목을 추가하고 싶습니다. 이후에 동일한 버튼을 누를 때마다 다른 항목을 추가해야합니다.

불행히도, 나는 그것에 접근하는 방법에 대한 단서가 없습니다.

현재 I가 가지고

가

<button type="button" ng-click="notYetExistingArray.unshift({})"> 

범위 이미 형 배열의 객체 "notYetExistingArray"를 포함하는 경우 = [] I 쉽게 상기 기능 항목을 추가 할 수있다.

어떻게해야합니까?

Answer 1

마크 업에서 모든 작업을 수행하는 대신 ng-click 지시어에서 컨트롤러 기능을 호출하십시오. 배열의 존재 여부에 대한 검사를 포함 할 수 있으며 필요한 경우 만들 수 있습니다. 컨트롤러에서

<button type="button" ng-click="addThis(thing)"> 

: 여기 controllerAs 구문을 사용하고

ctrl.addThis = function(thing) { 
    if (ctrl.myArray === undefined) { 
     ctrl.myArray = []; 
    } 

    myArray.unshift(thing); 
}; 

주, 그래서 ctrl 대신 $scope을 수 있습니다. 하는 것,

<button type="button" ng-init="notYetExistingArray=[]" ng-click="notYetExistingArray.unshift({})"> 

체크 NG-초기화 https://docs.angularjs.org/api/ng/directive/ngInit

Answer 2

당신은 예를 들어, 그 일을하기 전에 배열을 초기화 할 수 있습니다 배열이 존재하는지 검사하기 위해 테스트를 수행하십시오. 당신의 컨트롤러에서

:

function foo(item) { 
    //if my array does not exist 
    if (!$scope.myArray) { 
    //create the array 
    $scope.myArray = []; 
    } 
    //Here, we can add some data to our array, we are sure that the array exist 
    $scope.myArray.unshift(item); 
} 

$scope.foo = foo; 

HTML을 :

<h2>Array.length : {{myArray.length}}</h2> 
</br> 
<button type="button" ng-click="foo({})">Add</button> 

이 작동 Working Plunker

Answer 3

좋은 방법은 ngClick 지침에 기능을 결합하는 것입니다 설명서 :