我知道我们可以使用 ng-change 来解决这个问题,但我想了解为什么 $watch 对 select 不起作用。也许我做错了什么,但似乎我不是唯一一个为此苦苦挣扎的人。 这是我的代码:
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;
})
谢谢...
最佳答案
为了让它工作,你需要在你的代码中做一些更改,你需要将所有服务器相关信息放入一个名为 self.serverInfo
的对象中,该对象将包含有关 的信息server
和 servers
直接将其与范围变量绑定(bind)将根据 JavaScript 原型(prototype)继承自动更新绑定(bind)。
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;
})
关于javascript - AngularJS:$watch 用于选择输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30004392/