How to create an Array with AngularJS's ng-model
JavascriptAngularjsJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
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
Solution 2 - Javascript
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
}]);
Solution 3 - Javascript
You can do a variety of things. What I would do is this.
Create an array on scope that will be your data structure for the phone numbers.
$scope.telephone = '';
$scope.numbers = [];
Then in your html I would have this
<input type="text" ng-model="telephone">
<button ng-click="submitNumber()">Submit</button>
Then when your user clicks submit, run submitNumber(), which pushes the new telephone number into the numbers array.
$scope.submitNumber = function(){
$scope.numbers.push($scope.telephone);
}
Solution 4 - Javascript
One way is to convert your array to an object and use it in scope (simulation of an array). This way has the benefit of maintaining the template.
$scope.telephone = {};
for (var i = 0, l = $scope.phones.length; i < l; i++) {
$scope.telephone[i.toString()] = $scope.phone[i];
}
<input type="text" ng-model="telephone[0.toString()]" />
<input type="text" ng-model="telephone[1.toString()]" />
and on save, change it back.
$scope.phones = [];
for (var i in $scope.telephone) {
$scope.phones[parseInt(i)] = $scope.telephone[i];
}
Solution 5 - Javascript
This should work.
app = angular.module('plunker', [])
app.controller 'MainCtrl', ($scope) ->
$scope.users = ['bob', 'sean', 'rocky', 'john']
$scope.test = ->
console.log $scope.users
HTML:
<input ng-repeat="user in users" ng-model="user" type="text"/>
<input type="button" value="test" ng-click="test()" />
Solution 6 - Javascript
##How to create an array of inputs with ng-model
Use the ng-repeat directive:
<ol>
<li ng-repeat="n in [] | range:count">
<input name="telephone-{{$index}}"
ng-model="telephones[$index].value" >
</li>
</ol>
##The DEMO
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.count = 3;
$scope.telephones = [];
})
.filter("range",function() {
return (x,n) => Array.from({length:n},(x,index)=>(index));
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<button>
Array length
<input type="number" ng-model="count"
ng-change="telephones.length=count">
</button>
<ol>
<li ng-repeat="n in [] | range:count">
<input name="telephone-{{$index}}"
ng-model="telephones[$index].value" >
</li>
</ol>
{{telephones}}
</body>