javascript - 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. 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;

})

Thanks...

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;

})

Thanks...

Share Improve this question asked May 2, 2015 at 15:56 curuba 5771 gold badge12 silver badges29 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

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>

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

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.

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>

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

})

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - AngularJS: $watch for a select input - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)