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>