AngularJS model is populated in javascript but empty on the page -
i've got code...
agencyapp.factory('agencydata', function ($http, $log) { return { getagencies: function(successcb){ $http({ method: 'get', url: 'http://localhost/mappingserviceswebapi/api/mapping' }). success(function(data){ successcb(data); }). error(function(data){ $log.warn(data, status, headers, config); }) } } }); which gets data webapi. $scope.agencies model gets populated agencylist array. when try use array...
<div ng-controller="agenciesctrl"> <select ng-model="agencies"> <option>select agency</option> <option ng-repeat="a in agencies" >{{a.agencylist.agencyname}}</option> </select> {{agencies.agencylist}} </div> it's empty...can me might doing wrong?
here's controller, sorry thought included it...
agencyapp.controller('agenciesctrl', function agenciesctrl($scope, agencydata) { agencydata.getagencies().then(function (rtnagencies) { $scope.agencies = rtnagencies; }); });
i tried post picture of populated $scope object don't have enough reputation points...
it looks this(each indent nested object)...
$scope.agencies [prototype] agencylist[] [0] [prototype] agencyid -10168 agencyname "#1 insurance agency" if hard code data...
function agenciesctrl($scope, agencydata) { $scope.agencies = [ { agencyid: 'test one', agencyname: 'agency test 1' }, { agencyid: 'test two', agencyname: 'agency test 2' }]; }; it works
if hard code data inside function call
function agenciesctrl($scope, agencydata) { agencydata.getagencies().then(function (rtnagencies) { $scope.agencies = [ { agencyid: 'test one', agencyname: 'agency test 1' }, { agencyid: 'test two', agencyname: 'agency test 2' }]; }); }; it doesn't work
i haven't seen 1 example of using data web api...all examples have seen hard code data, what's point in that?
first, remove ng-model="agencies" <select> element. dont want bind select element same object running ng-repeat on. try <select ng-model="selectedagency" > instead.
second, suggest utilizing angular's deferred api return promise, resolved value of data returned server, when finished:
agencyapp.factory('agencydata', function ($http, $log, $q) { return { getagencies: function(successcb){ var deferred = $q.defer(); $http({ method: 'get', url: 'http://localhost/mappingserviceswebapi/api/mapping' }). success(function(data){ deferred.resolve(successcb(data)); //i dont know successcb() }). error(function(data){ deferred.reject(data); $log.warn(data, status, headers, config); }) return deferred.promise; } }; }); in controller, this:
agencydata.getagencies().then(function(data) { $scope.agencies = data; }); as getagencies() function finishes getting data, $scope.agencies object updated resulting data.
Comments
Post a Comment