asp.net - ng-repeat not binding after successful ajax call -
i want use ng-repeat directive bind data div. though call successful , getting data , storing in scope variable im anot able use ng-repeat display it
<div data-ng-app="myapp" id="sidestatus" style="position:fixed;top:50%;right:0;height:200px;width:200px;background-color:red;" data-ng-controller="myctrl">//wont bind here after successful execution <ul> <li data-ng-repeat="x in obj"> {{x.heading+' '+x.id+' '+x.name }} </li> </ul> </div> my javascript
var app = angular.module("myapp", []); app.controller("myctrl", function ($scope, $http) { var obj2=new array(); $.ajax({ type: "post", url: "notifierservice.asmx/getdata", data: {}, contenttype: "application/json; charset=utf-8", datatype: "json", success:function (response) { var res = response.d; var res4 = res.split(","); (var = 0; < res4.length; i++) { var res2 = res4[i].split(":"); obj2[i] = {} obj2[i].heading = res2[0]; var res3 = res2[1].split("/"); obj2[i].id = res3[0]; obj2[i].name = res3[1]; } $scope.obj = obj2; //successfully execute success function everytime }, error:function () { alert("failure");} }); }); data being sent
"heading1:23/name1,heading2:24/name2"
whenever execute code outside angularjs "controlled" functions, angularjs doesn't know if may have change in of scopes, , because of don't try find changes , modify presentation changes if there any.
in code, making ajax call jquery. callback of ajax call executed outside of angularjs controlled code , happens explained previously. have inform angularjs may have changed in scope. have 2 options this.
$scope.$digest() used tell angularjs check changes. you're code this:
success:function (response) { var res4 = res.split(","); var res = response.d; (var = 0; < res4.length; i++) { //... } $scope.obj = obj2; $scope.$digest(); //hey angularjs, changes update scope! } another way use $scope.$apply. method tells angularjs execute function passed argument , afterwards (whether function executed correctly or not, throwing , error example) check changes in scopes. code like:
success:function (response) { $scope.$apply(function() { //hey angularjs, execute function , update view! var res = response.d; var res4 = res.split(","); (var = 0; < res4.length; i++) { //... } $scope.obj = obj2; }) }
Comments
Post a Comment