Angular Js dropdown所選值控制器內未定義

Question

我想在angularJs中選擇一個下拉值並將其保存在服務中，這樣我就可以在另一個視圖上使用它來顯示用戶所選的值和完整的下拉列表。但是，當我嘗試在controller中記錄選定的值。我正在獲取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 
}; 

我使用AngularJS網站。但是提到selectedoption也嘗試仍然不可能做到這一點。

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>