Angular Js dropdown Ausgewählter Wert undefined in der Steuerung

Question

Ich versuche einen Dropdown-Wert in angularJs auszuwählen und in einem Service zu speichern, so dass ich ihn in einer anderen Ansicht verwenden kann, um den Benutzer seinen ausgewählten Wert und vollständige dropdown anzuzeigen Ich versuche, den ausgewählten Wert im Controller zu protokollieren. Ich bekomme einen Wert von undefined. Bitte helfen Sie mir, wie es weitergeht.

<td> 
    <select name="systems" class="pulldown1" id="systems" ng-model="system.selectedOption" ng-controller="EurexController" required ng-options="option.name for option in system.availableOptions track by option.id" ng-init="system.selectedOption=system.availableOptions[0]" ng-change="changed()"> </select> 
</td> 

Controller-Code:

$scope.system = { 
    availableOptions: [{ 
    id: 'Domestic 1', 
    name: 'Domestic 1' 
    }, { 
    id: 'Domestic 2', 
    name: 'Domestic 2' 
    }, { 
    id: 'Global', 
    name: 'Global' 
    }, { 
    id: 'Far East', 
    name: 'Far East' 
    }], 
    // selectedOption: {id: 'Domestic 1', name: 'Domestic 1'} //This sets the default value of the select in the ui 
}; 

Ich habe auch versucht selectedoption in AngularJS website.But erwähnt verwenden könnte nicht noch es tun.

console.log($scope.system.selectedOption); 
console.log(systems); 

Answer 1

Es ist besser, Ihr ng-controller Attribut auf einem Container-Element zu setzen, anstatt direkt auf das so etwas wie ein <select> Element. Dadurch können Sie den Controller in Ihrer gesamten Ansicht verwenden, anstatt ihn auf das Element <select> zu beschränken. Ihr console.log(systems); ist nicht definiert, da systems im Controller-Kontext nicht vorhanden ist. Vermeiden Sie die Verwendung von ng-init, es sei denn, Sie benötigen es wirklich, wie in the docs beschrieben. Hier ist ein funktionierendes Beispiel eine modifizierte Version des Codes unter Verwendung von Ihnen zur Verfügung gestellten:

angular.module('app', []) 
 
    .controller('ctrl', function($scope, myService) { 
 
    $scope.system = { 
 
     availableOptions: [{ 
 
     id: 'Domestic 1', 
 
     name: 'Domestic 1' 
 
     }, { 
 
     id: 'Domestic 2', 
 
     name: 'Domestic 2' 
 
     }, { 
 
     id: 'Global', 
 
     name: 'Global' 
 
     }, { 
 
     id: 'Far East', 
 
     name: 'Far East' 
 
     }] 
 
    }; 
 

 
    $scope.system.selectedOption = {}; 
 
    // uncomment the following line if you want to set a default selection 
 
    //$scope.system.selectedOption = $scope.system.availableOptions[0]; 
 

 
    $scope.optionChanged = function() { 
 
     myService.optionValue = $scope.system.selectedOption; 
 
     console.log($scope.system.selectedOption); 
 
    } 
 
    }) 
 
    .controller('ctrl2', function($scope, myService) { 
 
    $scope.myService = myService; 
 
    }) 
 
    .service('myService', function() { 
 
    var _optionValue = {}; 
 
    return { 
 
     get optionValue() { 
 
      return _optionValue; 
 
     }, 
 
     set optionValue(value) { 
 
      _optionValue = value || {}; 
 
     } 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="ctrl"> 
 
    <h2>ctrl</h2> 
 
    <div> 
 
     <select ng-model="system.selectedOption" ng-options="option as option.name for option in system.availableOptions" ng-change="optionChanged()"> 
 
     <option value="">Please select</option> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     Selected option: {{ system.selectedOption | json }} 
 
    </div> 
 
    </div> 
 
    <div ng-controller='ctrl2'> 
 
    <h2>ctrl2</h2> 
 
    <div> 
 
     {{ myService.optionValue }} 
 
    </div> 
 
    </div> 
 
</div>