角度Jsドロップダウンコントローラ内で未定義の選択値

Question

angularJsのドロップダウン値を選択してサービスに保存しようとしています。これを別のビューで使用して、選択した値と完全なドロップダウンを表示できます。私はコントローラ内で選択された値を記録しようとしています。私は未定義の値を取得しています。進む方法を教えてください。

<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 website.Butで言及selectedoptionはまだそれを行うcouldntの使用してみました。

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

Answer 1

それは<select>要素のようなものの上に直接コンテナ要素であなたのng-controller属性を置く代わりにする方が良いでしょう。これにより、コントローラーを<select>要素に限定するのではなく、ビュー全体で使用することができます。コントローラーコンテキストにsystemsが存在しないため、console.log(systems);は未定義です。 the docsで説明されているように本当に必要な場合を除き、ng-initは使用しないでください。ここでは、提供されているコードの修正版を使用した実施例である：

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>