How to create an Array with AngularJS's ng-model

Question

I'm trying to create an array holding telephones, i have this code

<input type="text" ng-model="telephone[0]" /> <input type="text" ng-model="telephone[1]" /> 

But i can't access $scope.telephone

Answer 1

First thing is first. You need to define $scope.telephone as an array in your controller before you can start using it in your view.

$scope.telephone = []; 

To address the issue of ng-model not being recognised when you append a new input - for that to work you have to use the $compile Angular service.

From the Angular.js API reference on $compile:

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

// I'm using Angular syntax. Using jQuery will have the same effect // Create input element var input = angular.element('<div><input type="text" ng-model="telephone[' + $scope.inputCounter + ']"></div>'); // Compile the HTML and assign to scope var compile = $compile(input)($scope); 

Have a look on JSFiddle

Answer 2

It works fine for me: http://jsfiddle.net/qwertynl/htb9h/

My javascript:

var app = angular.module("myApp", []) app.controller("MyCtrl", ['$scope', function($scope) {     $scope.telephone = []; // << remember to set this }]);