how to fill empty array with objects updated in directive?

Question

I started my adventure with Angular directives. Somewhere in my app I have to choose number of passengers. Then I have to assign "First Name" and "Last Name" for each of them. So I created simple directive for creating html template for that and used it in ng-repeat:

app.directive('ngDoubleInputBox', function() { return { restrict: 'E', scope: { 'heading': '@?', 'leftInputHeading': '@?', 'rightInputHeading': '@?', 'headingNumber': '@?', 'passenger' : '=' }, templateUrl: '/src/html/doubleInput.html' } }); 

and doubleInput.html :

<div class="inputContainer"> <div class="containerTitle">{{headingNumber}}{{heading}}</div> <form class="form-inline"> <div class="form-group leftInputContainer"> <label for="left-input">{{leftInputHeading}}</label> <div> <input class="form-control" type="text" id="left-input" ng-model="passenger.firstName"> </div> </div> <div class="form-group rightInputContainer"> <label for="right-input">{{rightInputHeading}}</label> <div> <input class="form-control" type="text" id="right-input" ng-model="passenger.lastName"> </div> </div> </form> </div> 

Usage:

<div class="flightPassengersContent" ng-repeat="passenger in getPassengers() track by $index"> <ng-double-input-box heading-number="{{$index + 1}}" heading=". Passenger" left-input-heading="First name" right-input-heading="Last name" model={{passenger}}> </ng-double-input-box> </div> 

I do only have amount of passengers and empty array.

 $scope.getPassengers = function() { return new Array($scope.passengersAmmount); }; 

So my question is: How to create an array of data that I could use here? Is it a good approach for passing array elements into directive and change them? If so, how to prepare such array? I tried to create some default passenger objects with null values and get rid of track by $index" statement but it didnt work.

Any ideas?

Regards, Michal

Answer 1

I had to fix my directive and its usage(replaced passenger property into model property):

directive:

app.directive('ngDoubleInputBox', function() { return { restrict: 'E', scope: true, scope: { 'heading': '@?', 'leftInputHeading': '@?', 'rightInputHeading': '@?', 'headingNumber': '@?', 'model':'=' }, templateUrl: '/src/html/doubleInput.html' } }); 

usage :

<ng-double-input-box heading-number="{{$index + 1}}" heading=". Passenger" left-input-heading="First name" right-input-heading="Last name" model=passenger> </ng-double-input-box> 

template :

<div> <input class="form-control" type="text" ng-model="model.firstName"> </div> 

@georgeawg I was able to remove track by $index and avoid error:

Error: ngRepeat:dupes Duplicate Key in Repeater

after replacing:

$scope.getPassengers = function() { return new Array($scope.passengersAmmount); }; 

with

 (function initializeEmptyPassengers() { $scope.passengers = []; for(i=0; i< $scope.passengersAmmount; i++) { $scope.passengers.push( {} ); }; })(); $scope.getPassengers = function() { return $scope.passengers; }; 

So now I am working on array with empty objects and pass this objects into directive, but this is not very clean solution for me. Does anyone know if its possible to work with
ng-repeat track by $index with same results but without previous array initialization?