Angular js : How to make make ajax call for directives to create options

Question

I created directives for form controls. There are some controls those will have options from ajax[API] call.

I am stuck here how to make ajax call over directives.

    function selectControlDir()
    {
        return {
            transclude: true,
            restrict: 'E',
            scope: {
                data: '=data'
            },
            template: "<div ng-transclude></div><label>{{data._text}} </label><select type='text' name='{{data._attributeName}}' id='{{data._attributeName}}' >\n\
<option ng-repeat='ans in data._answerOptions'>{{ans._promptText}}</option></select>"
            ,
            link: function (scope, element, attrs)
            {
                //console.log("scope.data.QuestionData", scope.data.QuestionData);
            }
        };
    }

Plunker for complete code http://plnkr.co/edit/Op1QDwUBECAosPUC7r3N?p=preview

Here I want to make api call for Year (on page load). on year change update options of Make.

Jai · Accepted Answer · 2016-07-19 11:54:41Z

What you can do for this is better to have a ng-change event directive on the year element and in the controller you can use to have an array which holds all the make happened in that year:

var app = angular.module('yourApp', []);

app.controller('yourController', ['$scope', '$http',
  function($scope, $http) {
    $scope.o = {
      makes: [{make:'Make1'}, {make:'Make2'}], // <---just for demo
      getMake: function(year) {
        $http.post(url, {
            year: year  // <----pass the year to backend as year like : { year:1990 }
          })
          .then(function success(response) {
              $scope.o.makes = response.data; // <---put actual data here
            },
            function error(e) {
              console.error(e);
            });
      }
    };
  }
]);

<div ng-app='yourApp' ng-controller='yourController'>
  <select ng-model='year' ng-change='o.getMake(year)'>
    <option>1990</option>
    <option>1991</option>
  </select>
    <select ng-model='make' ng-options='make as make.make for make in o.makes track by make.make'>
    <option>Make...</option>
  </select>
</div>

Ran Bar-Zik · Accepted Answer · 2016-07-19 10:54:46Z

0

You should get the options by angular service. The angular service will send the AJAX call and return the result (and even some default data in case of failure).

How to do it? Here is an example:

var app = angular.module('app',[]);
//Service
app.factory('myService', function(){
  function getOption() {
      return 'getOption';
  }
  return {
      getOption: getOption
  }
});

app.directive('myDirective', ['myService',function(myService){
  return {
    template: '<h1>{{name}}</h1>'
    link: function (scope, element, attrs) {
        scope.name = myService.getOption();
    }
  }
}]);

answered Jul 19, 2016 at 10:54

Ran Bar-Zik

1,2379 silver badges14 bronze badges

1 Comment

pandu das Over a year ago

In plunker I created common directive for all select type querstion. here I want to introduce ajax call for year(onload) and model(on year change). How to do here?

Arun Ghosh · Accepted Answer · 2016-07-19 11:07:52Z

0

Use can use $http to make ajax call. You need to inject it to use it. Better solution is to move the service calls to factory/service.

function selectControlDir($http)
{
    return {
        transclude: true,
        restrict: 'E',
        scope: {
            data: '=data'
        },
        template: "<div ng-transclude></div><label>{{data._text}} </label

> ><select type='text' name='{{data._attributeName}}' id='{{data._attributeName}}' >\n\ <option ng-repeat='ans in
> data._answerOptions'>{{ans._promptText}}</option></select>"

        ,
        link: function (scope, element, attrs)
        {
            // $http.post(url, options); => make your call here    
            //console.log("scope.data.QuestionData", scope.data.QuestionData);
        }
    };
}

edited Jul 19, 2016 at 11:07

answered Jul 19, 2016 at 10:56

Arun Ghosh

7,7741 gold badge28 silver badges38 bronze badges

3 Comments

pandu das Over a year ago

$http.post or $http.get => make your call here "this is helpful" but how to set options.

Arun Ghosh Over a year ago

@pandudas : options means some parameters?

pandu das Over a year ago

added api.php this will return a jason. option means <select><option value=""><option> these options are in directive template that should be updated.

Alexander_F · Accepted Answer · 2016-07-19 11:15:23Z

0

The best way is to create a service or a factory and inject it into your directive.

app.service("serviceName", ["$http", function($http) {
  return {
    getData: function(configObject) {
      // $http.get(..., post... etc
    }
  }
}]);

You can use it in your link or in controller statement.

selectControlDir(serviceName) {
  return{
    ...
    link: function() {
      selectControlDir.getData({ url: ..., getParam1: 123})
    }
    ... or ...
    controller: function() {
      selectControlDir.getData({ url: ..., getParam1: 123})
    }
  }
}

answered Jul 19, 2016 at 11:15

Alexander_F

2,8873 gold badges30 silver badges62 bronze badges

2 Comments

pandu das Over a year ago

I got that selectControlDir.getData({ url: ..., getParam1: 123}) will return some data but how to use that to set select options <option>....

Alexander_F Over a year ago

@pandudas don't use in select ng-repeat on options, better use ng-options in select > docs.angularjs.org/api/ng/directive/ngOptions then you can set the value with $scope.modelName

Collectives™ on Stack Overflow

Angular js : How to make make ajax call for directives to create options

4 Answers 4

Comments

1 Comment

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related