Angularjs指令で正しいオプションが選択されていません

Question

質問：性別に応じて正しいオプションを選択する方法を教えてください。

1）ページ上に複数の選択肢があるように、指示に情報を入れようとしています。これは性別の値を読み取ります。その人がどの性別を持っているかを知る前に、指示が読み込まれていたので、そこにng-ifを置いた。 （これを処理するより良い方法があるかもしれません）

MarkUP 
<label>Gender:</label> 
<directive-dropdown ng-if="$ctrl.PersonOC.GENDER" id="ddlGender" entity-name="GENDER" dd-value="true" selected-value="{{$ctrl.PersonOC.GENDER}}"></directive-dropdown> 

2）私はこの指示をサービスから読みます。しかし、私はどのように 'M'を選択するのか分からない。

Directive 
var dropdownApp = angular.module('dropdownApp', ['core.pvms']); 


dropdownApp.directive('directiveDropdown', function() { 
return { 
    restrict: 'E', 
    scope: { 
     entityName: '@', 
     ddValue: '@', 
     selectedValue: '@', 
     ngModel: '=' 
    } 
    ,template: '<select ng-model="selectedOption" ng-options="option.DROP_DOWN_VALUE for option in pvmsOptions track by option.CD">' + 
       '<option value="">-- select one --</option></select>' 
    ,replace: true 
    ,controller: ['$scope', 'pvmsService', function ($scope, pvmsService) { 
     var paramsObj = {}; 
     paramsObj.entityName = $scope.entityName; 
     paramsObj.ddValue = $scope.ddValue; 

     $scope.pvmsOptions = pvmsService.query(paramsObj); 
     if ($scope.ngModel != '') { 
      $scope.ngModel = $scope.selectedValue; 
     } 
    } ] 
    ,link: function ($scope, element, attrs) { 
     $scope.ngModel = $scope.selectedValue; 
    } 
}; 
}); 

3）あなたは、あなたがngModelControllerへのアクセスを得るためにあなたの指示にrequire: 'ngModel'を使用することができるのではなく「男性」

Rendered Html 
<select ng-model="selectedOption" ng-options="option.DROP_DOWN_VALUE for option in pvmsOptions track by option.CD" 
ng-if="$ctrl.PersonOC.GENDER" id="ddlGender" entity-name="GENDER" dd-value="true" selected-value="M" 
class="ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope ng-empty"> 
<option value="" class="" selected="selected">-- select one --</option> 
<option label="FEMALE   " value="F">FEMALE   </option> 
<option label="MALE   " value="M">MALE   </option> 
</select> 

Answer 1

1つの問題は、私は、データが存在したかどうかを確認するロジックを追加リンク内のように、約束が完了していない、まだ...ということでした。それが成功した後、私はpvmsOptionsをループし、ngModalを適切なものに設定しました。

, controller: ['$scope', 'pvmsService', function ($scope, pvmsService) { 
     var paramsObj = {}; 
     paramsObj.entityName = $scope.entityName; 
     paramsObj.ddValue = $scope.ddValue; 

     $scope.pvmsOptions = pvmsService.get(paramsObj); 

    } ] 
      ,link: function ($scope, element, attrs, ngModelCtrl) {     

        //put this here to wait until the data has been actually read. 
        $scope.pvmsOptions.$promise.then(function(data) { 
         //console.log(data); 

         //loop thru and select the value from the db. 
         angular.forEach($scope.pvmsOptions, function (s) { 
           if (s.CD == $scope.selectedValue) { 
           $scope.ngModel = s; 
           }}); 

        }); 
       }, 

Answer 2

、第一のオプションが選択されているレンダリングされたHTMLで見ることができます。そこからngModelControllerの$setViewValueと$commitViewValueメソッドを使用できます。

Directive 
var dropdownApp = angular.module('dropdownApp', ['core.pvms']); 


dropdownApp.directive('directiveDropdown', function() { 
return { 
    restrict: 'E', 
    scope: { 
     entityName: '@', 
     ddValue: '@', 
     selectedValue: '@', 
     ngModel: '=' 
    } 
    ,template: '<select ng-model="selectedOption" ng-options="option.DROP_DOWN_VALUE for option in pvmsOptions track by option.CD">' + 
       '<option value="">-- select one --</option></select>' 
    ,replace: true 
    ,require: 'ngModel' 
    ,controller: ['$scope', 'pvmsService', function ($scope, pvmsService) { 
     var paramsObj = {}; 
     paramsObj.entityName = $scope.entityName; 
     paramsObj.ddValue = $scope.ddValue; 

     $scope.pvmsOptions = pvmsService.query(paramsObj); 
     if ($scope.ngModel != '') { 
      $scope.ModelCtrl.$setViewValue($scope.selectedValue); 
      $scope.ModelCtrl.$commitViewValue(); 
     } 
    } ] 
    ,link: function ($scope, element, attrs, ModelCtrl) { 
     $scope.ModelCtrl = ModelCtrl; 
     ModelCtrl.$setViewValue($scope.selectedValue); 
     ModelCtrl.$commitViewValue(); 
    } 
}; 
});