Add new entry to (empty) scope array using ng-click directive - arrays

Question

My scope does not contain an "notYetExistingArray" at the time of generation.
Via a button, I would like to add the array plus a first entry to it.
Each subsequent push of the same button should then add another entry.
Unfortunately, I have no clue on how to approach it.
Currently I have:
<button type="button" ng-click="notYetExistingArray.unshift({})">
If the scope already contains an object "notYetExistingArray" of type array = [] I can easily add an entry with above function.
Any advise on how to do it?

Answer 1

Call a controller function from your ng-click directive rather than trying to do all that stuff in your markup. It can include a check for the existence of the array, and create it if needed.
<button type="button" ng-click="addThis(thing)">
In the controller:
ctrl.addThis = function(thing) {
if (ctrl.myArray === undefined) {
ctrl.myArray = [];
}
myArray.unshift(thing);
};
Note that I'm using controllerAs syntax here, so ctrl might be $scope instead.

Answer 2

You can initialize the array before doing that, for example:
<button type="button" ng-init="notYetExistingArray=[]" ng-click="notYetExistingArray.unshift({})">
check the documentation for ng-init https://docs.angularjs.org/api/ng/directive/ngInit

Answer 3

A good way is to bind a function on the ngClick directive, which will perform a test in order to check if the array exist.
In your controller :
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>
Feel free to check the Working Plunker