AngularJS：$監視選擇輸入

Question

我知道我們可以使用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;

})

謝謝...

Answer 1

為了使其正常工作，您需要對代碼進行一些更改，您需要將所有服務器相關信息放到一個名為self.serverInfo對象中，該對象將包含有關server和servers的信息，直接將其與范圍變量綁定將自動更新綁定根據JavaScript Prototypal繼承。

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;

})

工作Plunkr

Answer 2

我接受來自@pankajparkar的答案，但我想顯示我的最終代碼，事實上它與@pankajparkar提出的正確綁定我不再需要$ watch了。

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];

})

AngularJS：$監視選擇輸入

問題描述

2 個解決方案

解決方案1
5 已采納 2015-05-02 16:07:47

解決方案2
1 2015-05-02 17:04:17

AngularJS：$監視選擇輸入

問題描述

2 個解決方案

解決方案1 5 已采納 2015-05-02 16:07:47

解決方案2 1 2015-05-02 17:04:17

解決方案1
5 已采納 2015-05-02 16:07:47

解決方案2
1 2015-05-02 17:04:17