AngularJS：$监视选择输入
[英]AngularJS: $watch for a select input
问题描述
I know we can use ng-change to solve this but I would like to understand why $watch doesn'twork on select. 
我知道我们可以使用ng-change来解决这个问题，但我想了解为什么$ watch在select上工作。 Maybe I'm doingsomething wrong but it seems I am not the only one to struggle with this. 也许我做错了，但似乎我不是唯一一个与此斗争的人。 Here is my code: 这是我的代码：
HTML: 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: 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 个解决方案
解决方案1
5 已采纳 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. 为了使其正常工作，您需要对代码进行一些更改，您需要将所有服务器相关信息放到一个名为self.serverInfo对象中，该对象将包含有关server和servers的信息，直接将其与范围变量绑定将自动更新绑定根据JavaScript Prototypal继承。
HTML 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;
})
解决方案2
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. 我接受来自@pankajparkar的答案，但我想显示我的最终代码，事实上它与@pankajparkar提出的正确绑定我不再需要$ watch了。
HTML 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 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];
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.