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
6 Answers
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
3 Comments
Heroselohim
add $ to the scope --> $scope
T J
Just wondering, "To address the issue of ng-model not being recognised when you append a new input" - where is this issue in question..?
shahar eldad
@TJ It is an issue that will rise once you will try to do above without the $compile
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
}]);
5 Comments
DelGiudice
it works in jsfiddle perfectly but when i create the input elements with query's append it doesn't work, do you know why?
qwertynl
What do you mean @user1870612 ? Can you create a demo?
Ventzy Kunev
It works with input type="text", but when is type="email" it does not update model, until input is valid email. This can be confusing at first, as it seems like it does not work when you type random string, which is invalid value.
Anirudha
This is a very good alternative for quick fixes..Thanks.. ;-)
Anirudha
@VentzyKunev Thats what angular does always
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);
}
Comments
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];
}
Comments
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()" />
5 Comments
qwertynl
Are you answering a different question here?
SET001
Why it is different? I show how to bind multiple elements to array and that it is to accessabe it code...
SET001
@qwertynl, the you should admit that there was no question at all )
qwertynl
Haha That may be true :-P
Mathieu Brouwers
Next time, it might be usefull to mention your code is written in CoffeeScript, new Angular developers might get confused ;)
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>
ng-modeldoesn't create anything, it binds to something. Use$scope.telephone = [...]orng-initto create a new model.