AngularJS：$手表选择输入 [英] AngularJS: $watch for a select input
问题描述
我知道我们可以用NG-变化来解决这个，但我想知道为什么$观看doesn'twork的选择。也许我错了doingsomething但似乎我不是这个奋斗的唯一的一个。
这里是我的code：
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;
})
谢谢...
推荐答案
有关让它工作，你需要做的code更改数量，你需要把所有的服务器的相关信息，以命名为<$一个对象C $ C> self.serverInfo ，将包含有关服务器＆放的信息; 服务器直接与范围的变量绑定，这将自动更新绑定按照JavaScript的原型继承。
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>
控制器
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;
})
这篇关于AngularJS：$手表选择输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
