javascript - AngularJS:$watch 用于选择输入

标签 javascript angularjs ionic-framework

我知道我们可以使用 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 的对象中,该对象将包含有关 的信息serverservers 直接将其与范围变量绑定(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;

})

Working Plunkr

关于javascript - AngularJS:$watch 用于选择输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30004392/

相关文章:

javascript - Meteor 教程不更新 MongoDB

javascript - 在 JavaScript 中混淆字符串文字和对象键?

javascript - angular.isDefined() 与 obj.hasOwnProperty()

javascript - 带有 moment.js 的字符串值

javascript - 错误: [$injector:unpr] Unknown provider: $cordovaSmsProvider <- $cordovaSms <- smsController

javascript - ionic1 同一页面上的 2 个 slider 及其更改特定幻灯片的事件

javascript - 由于 CORS 问题,无法在 Heroku 上访问 Flask API

javascript - 什么是 md-component-id?

javascript - 生成 Angular 未知标签

ios - 在移动 safari `position:fixed` 上覆盖 `platform=ios` 卡在 <ion-header> 后面