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

58

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

This question is tagged with javascript angularjs

~ Asked on 2014-02-07 15:32:47

The Best Answer is


67

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

~ Answered on 2014-02-08 10:02:29


12

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
}]);

~ Answered on 2014-02-07 15:36:53


Most Viewed Questions: