gman gman - 3 months ago 10
AngularJS Question

Angularjs directive isn't selecting the correct option

Question: How do I select the correct option based on the person's gender.

1) I'm trying to put information in the directive so that i could have multiple selects on a page.. This one will read the gender values. I put the ng-if on there because the directive was loading before I read which gender the person had. (there may be a better way to handle this)

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)In the directive i read the options from a service. But I don't know how to select the '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) You can see in the rendered html that the 1st option is selected, rather than 'Male'

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

One issue was that the promise wasn't complete yet... so in the link I added logic to check if the data was present. After that was successful I looped thru the pvmsOptions and set ngModal to the appropriate one.

, 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;
                                }});

                    });
              },