AngularJS: $watch for a select input
Question
I know we can use ng-change to solve this but I would like to understand why $watch doesn'twork on select. Maybe I'm doingsomething wrong but it seems I am not the only one to struggle with this. Here is my code:
HTML:
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Serveur
</div>
<select ng-model="server" ng-options="s as s.label for s in serverschoice">
</select>
</label>
</div>
JS:
.controller('SettingsCtrl', function ($scope, $log, serverSelection) {
//List of servers to connect to
$scope.serverschoice = serverSelection.servers;
$scope.server = serverSelection.server;
$scope.$watch('server', function(NewValue, OldValue) {
serverSelection.server = NewValue;
$scope.url = serverSelection.url;
}, true);
})
.service("serverSelection", function() {
var self = this;
self.servers = [
{ label: 'Production', value: 1, url: 'url1' },
{ label: 'Training', value: 2, url: 'url2' },
{ label: 'Local', value: 3, url: 'url2' }
];
self.server = self.servers[1];
console.log(self.server);
self.url = self.server.url;
})
Thanks...
2 answers
solution1
5 ACCPTED 2015-05-02 16:07:47
For make it working you need to do number of changes in your code, You need to put all server related information to one object named as self.serverInfo that will contain the information about server & servers directly bind this with scope variable will update binding automatically as per JavaScript Prototypal inheritance.
HTML
<body ng-controller="SettingsCtrl">
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Server
</div>
{{serverInfo}}
<select ng-model="serverInfo.server"
ng-options="s as s.label for s in serverInfo.servers">
</select>
</label>
</div>
</body>
Controller
var app = angular.module('app',[]);
app.controller('SettingsCtrl', function ($scope, $log, serverSelection) {
//List of servers to connect to
$scope.serverInfo= serverSelection.serverInfo;
$scope.$watch('serverInfo.server', function(NewValue, OldValue) {
$scope.url = $scope.serverInfo.server.url;
}, true);
})
app.service("serverSelection", function() {
var self = this;
self.serverInfo = {};
self.serverInfo.servers = [
{ label: 'Production', value: 1, url: 'url1' },
{ label: 'Training', value: 2, url: 'url2' },
{ label: 'Local', value: 3, url: 'url2' }
];
self.serverInfo.server = self.serverInfo.servers[1];
console.log(self.server);
self.serverInfo.url = self.serverInfo.server.url;
})
solution2
1 2015-05-02 17:04:17
I accept answer from @pankajparkar but I'd like to show my final code as in fact with the proper binding proposed by @pankajparkar I don't need a $watch anymore.
HTML
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Serveur
</div>
<select ng-model="serverSelection.server" ng-options="s as s.label for s in serverSelection.servers">
</select>
</label>
</div>
<p>URL: {{serverSelection.server.url}}</p>
JS
.controller('SettingsCtrl', function ($scope, $log, serverSelection) {
//List of servers to connect to
$scope.serverSelection= serverSelection;
})
.service("serverSelection", function() {
var self = this;
self.servers = [
{ label: 'Production', value: 1, url: 'url0' },
{ label: 'Training', value: 2, url: 'url1' },
{ label: 'Local', value: 3, url: 'url2' }
];
self.server = self.servers[1];
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.