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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -