javascript - Angular js : How to make make ajax call for directives to create options -
i created directives form controls. there controls have options ajax[api] call.
i stuck here how make ajax call on 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 complete code http://plnkr.co/edit/op1qdwubecaospuc7r3n?p=preview
here want make api call year (on page load). on year change update options of make.
what can better have ng-change
event directive on year
element , in controller can use have array holds make happened in year:
var app = angular.module('yourapp', []); app.controller('yourcontroller', ['$scope', '$http', function($scope, $http) { $scope.o = { makes: [{make:'make1'}, {make:'make2'}], // <---just demo getmake: function(year) { $http.post(url, { year: year // <----pass year backend year : { 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 make.make make in o.makes track make.make'> <option>make...</option> </select> </div>
Comments
Post a Comment