javascript AngularJS: $ एक चयन इनपुट के लिए घड़ी




ionic-framework (2)

इसे काम करने के लिए आपको अपने कोड में बदलाव की संख्या करने की आवश्यकता है, आपको सभी सर्वर से संबंधित जानकारी को self.serverInfo नाम से एक ऑब्जेक्ट में self.serverInfo होगा जो server बारे में जानकारी self.serverInfo है। जावास्क्रिप्ट प्रोटोटाइप विरासत के अनुसार

एचटीएमएल

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

})

कार्य प्लंकर

https://code.i-harness.com

मुझे पता है कि हम इसे हल करने के लिए एनजी-परिवर्तन का उपयोग कर सकते हैं, लेकिन मैं यह समझना चाहूंगा कि क्यों $ घड़ी चयन पर नहीं है। शायद मैं कुछ गलत कर रहा हूं लेकिन ऐसा लगता है कि मैं इसके साथ संघर्ष करने वाला एकमात्र नहीं हूं। यहां मेरा कोड है:

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>

जे एस:

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

})

धन्यवाद...


मैं @ पंकजपरकर से जवाब स्वीकार करता हूं, लेकिन मैं अपने अंतिम कोड को वास्तविकता के रूप में प्रस्तुत करना चाहता हूं- पंकजकर द्वारा प्रस्तावित उचित बाध्यता के साथ मुझे अब और $ वॉच की आवश्यकता नहीं है।

एचटीएमएल

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

})




ionic-framework