I decided to study AngularJS and it was necessary to send a request for a script that returns JSON, then a list of Li is generated from this JSON

JSON from server:

[{"id":"1","title":"\u0413\u043e\u0432\u044f\u0434\u0438\u043d\u0430","description":"","pos":"1","approved":"1"},{"id":"2","title":"\u041a\u0443\u0440\u0438\u0446\u0430","description":"","pos":"2","approved":"1"},{"id":"3","title":"\u0411\u0430\u0440\u0430\u043d\u0438\u043d\u0430","description":"","pos":"3","approved":"1"},{"id":"4","title":"\u041f\u043e\u043b\u0443\u0444\u0430\u0431\u0440\u0438\u043a\u0430\u0442\u044b","description":"","pos":"4","approved":"1"},{"id":"5","title":"\u041d\u0430\u043f\u0438\u0442\u043a\u0438","description":"","pos":"5","approved":"1"},{"id":"6","title":"\u041d\u0430\u043f\u0438\u0442\u043a\u0438","description":"","pos":"6","approved":"1"}]

Controller:

 var CategoryController = angular.module('CategoryController',[]); CategoryController.controller('MakeCategories', function($scope){ $.get('http://api.site.com/categories',function(data){ $scope.categories = data; }); });

I notify in advance that I use $ .get , because $ http.get sends OPTIONS , even if I specify the GET method when calling the $ http () method. And do not send a request to your subdomain.

HTML code itself:

  <div class="col-2 clearfix" ng-app="CategoryController"> <div class="panel-header clearfix"> <div class="col-lg-3"><h1>Категории</h1></div> <div class="col-lg-9"> <button id="add-cat-btn" onclick="Category.CreateItem();" class="add-cat-btn">Добавить категорию</button> </div> </div> <div class="panel-content" ng-controller="MakeCategories"> <div class="panel-order-table cat-table"> <div class="panel-cat-header"> <span>НАИМЕНОВАНИЕ</span> </div> <ul class="panel-cat-list white-block"> <li ng-repeat="cat in categories"> <span id="drag-icon-block"> <span class="sprite-icon drag-icon"></span> </span> <span id="cat-item-label">{{cat.title}}</span> <div id="cat-item-btns"> <span onclick="Category.Edit({{cat.id}});" class="sprite-icon edit"></span> <span class="sprite-icon delete"></span> </div> </li> </ul> </div> </div> </div>

But nothing deduces. What could be the problem? I just started switching to JS frameworks.

  • see errors in the browser console - Grundy
  • It's empty there. I checked - Abreak06

1 answer 1

Since a non-built-in query mechanism is used, the angular does not know that the request has been executed and the data must be synchronized with the view.

You can use $ scope. $ Apply for this , or $ timeout service.

For example:

 CategoryController.controller('MakeCategories', function($scope){ $.get('http://api.site.com/categories',function(data){ $scope.$apply(function(){ $scope.categories = data; }); }); });