CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-service
VahidNaderi
VahidNaderi

Reputation: 2488

Loading select options from a service in a directive before model binding angularjs

I'm trying to create a directive to load select items(from server) for the lists that I need using a Key for each list, but it seams that model is bound before the items get a chance to load, and the desired item is not get selected, any suggestion?

Services:

arsinServices.factory('GeneralProperties', ['$resource', function ($resource) {
    return $resource('/api/GeneralProperties/');
}]);

Directive:

directives.directive('ngarGpSelect', ['GeneralProperties', 
function (GeneralProperties) {
     return {
        restrict: 'E',
        replace: true,
        scope: {
            ngModel: '='
        },
        controller: function ($scope, $attrs, GeneralProperties) {
            $scope.gpItems =  GeneralProperties.query({ key: $attrs.gpkey });
        },
        templateUrl: '/templates/gp-select.html',
        require: 'ngModel',
    }
}]);

Template:

<select  ng-options="gp.Index as gp.Name for gp in gpItems"></select>

Contoller:

arsinControllers.controller('RequestEditCtrl', ['$scope', 'request',
    function ($scope, request) {
        $scope.request = request;
}

View:

<ngar-gp-select gpKey="RequestType" ng-model="request.RequestTypeIndex"/>

Update Here is a fiddle thanks to @Nix.

Update 2: If I replace the line which set gpItems in directive controller whith something like this:

$scope.gpItems =   [{ Index: 1, Name: 'option1' }, { Index: 2, Name: 'option2' }, { Index: 3, Name: 'option3' }];

It will work as expected, and the item get selected.

Upvotes: 0

Views: 704

Answers (3)

VahidNaderi
VahidNaderi

Reputation: 2488

Finally I located the problem, it was because of items from my service. the Index property was of type string instead of int, I changed the type in my server side interface and it worked. I have had found similar cases in SO mentioning this but I overlooked them. I hope it will help someone else.

Upvotes: 0

Nix
Nix

Reputation: 58522

You have yet to really show an "issue"... I dont understand what you are trying to do but if you initialize $scope.request in the fiddle Nick will be selected. 

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.request = {
        RequestTypeIndex: 1
    }
    $scope.RequestType = 1
}

Then in your directive you need to use the promise(although your example should work):

function (GeneralProperties) {
     return {
        restrict: 'E',
        replace: true,
        scope: {
            ngModel: '='
        },
        controller: function ($scope, $attrs, GeneralProperties) {
            GeneralProperties.query({ key: $attrs.gpkey }).then(function(data){
                $scope.gpItems =  data
            }, function(error){
                alert(error);
            })
        },
        templateUrl: '/templates/gp-select.html',
        require: 'ngModel',
    }
}]);

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

Utilize a callback from the query:

GeneralProperties.query({ key: $attrs.gpkey }, function(data) {
    $scope.gpItems = data;
});

Upvotes: 0

Related Questions