AngularJS not generating list from JSON?

Question

JavaScript

I decided to study AngularJS and needed to send a request to a script that returns JSON, then from this JSON a JSON list is generated

from the 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'll warn you ahead of time that I'm using $.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.

The 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 it doesn't output anything. What could be the problem? I just started to switch to JS frameworks.

Answer 1

After loading, you need to do $scope.$apply() or $scope.$digest()

Answer 2

Wow. Didn't know about such $.get in angular at all. I use http and everything is ok plnkr.co/edit/Nk5eLwszMe0jTNicei7S?p=preview $.get seemed to be from jQuery scope