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 related to
javascript
angularjs
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
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
}]);
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);
}
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];
}
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()" />
Use the ng-repeat directive:
<ol>
<li ng-repeat="n in [] | range:count">
<input name="telephone-{{$index}}"
ng-model="telephones[$index].value" >
</li>
</ol>
angular.module("app",[])_x000D_
.controller("ctrl",function($scope){_x000D_
$scope.count = 3;_x000D_
$scope.telephones = [];_x000D_
})_x000D_
.filter("range",function() {_x000D_
return (x,n) => Array.from({length:n},(x,index)=>(index));_x000D_
})<script src="//unpkg.com/angular/angular.js"></script>_x000D_
<body ng-app="app" ng-controller="ctrl">_x000D_
<button>_x000D_
Array length_x000D_
<input type="number" ng-model="count" _x000D_
ng-change="telephones.length=count">_x000D_
</button>_x000D_
<ol>_x000D_
<li ng-repeat="n in [] | range:count">_x000D_
<input name="telephone-{{$index}}"_x000D_
ng-model="telephones[$index].value" >_x000D_
</li>_x000D_
</ol> _x000D_
{{telephones}}_x000D_
</body>Source: Stackoverflow.com