Угловое раскрывающееся окно Js Выбранное значение не определено внутри контроллера

Question

Я пытаюсь выбрать выпадающее значение в angularJs и сохранить его в службе, чтобы я мог использовать его на другом представлении, чтобы отобразить пользователя, его выбранное значение и полное раскрывающееся меню. Но когда Я пытаюсь зарегистрировать выбранное значение внутри контроллера. Я получаю значение undefined. Пожалуйста, помогите мне, как действовать.

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

код контроллера:

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

Я также попытался использовать selectedoption, упомянутые в AngularJS website.But еще не смог это сделать.

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

Answer 1

Это лучше поставить атрибут ng-controller на элемент контейнера, а не непосредственно на что-то вроде <select> элемента. Это позволяет использовать контроллер во всем своем представлении, а не ограничивать его элементом <select>. Ваш console.log(systems); не определен, потому что systems не существует в контексте контроллера. Избегайте использования ng-init, если вы действительно не нуждаетесь в нем, как описано в the docs. Вот рабочий пример, используя модифицированную версию кода вы предоставили:

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>