Как показать данные API с AngularJs в HTML

Question

Здравствуйте, у меня есть следующий код, и я хочу показать объекты, которые API возвращает в мой HTML, но я рисую пробел в этом, также я хочу сделать фильтр для сортировки по id.

angular.module('MainApp').controller('PhoneController', function ($scope, $http) {
    $scope.home = "This is the homepage";

    $scope.getRequest = function () {
        console.log("I've been pressed!");
        $http.get("http://api.myjson.com/bins/12qiaa")
            .then(function successCallback(response) {
                $scope.response = response;
                console.log(response.data.galerija);
                var row0 = response.data.galerija[0];
                var row1 = response.data.galerija[1];
                var row2 = response.data.galerija[2];
                var row3 = response.data.galerija[3];
                var row4 = response.data.galerija[4];
                var row5 = response.data.galerija[5];
            }, function errorCallback(response) {
                console.log("Unable to perform get request");
            });
    };

Answer 1

Чтобы заполнить ваш HTML, вам нужно привязать ваш модальный вид.Angular использует синтаксис handlebar .

Прежде всего, нужно объявить вашу модель, скажем, $scope.galerijas, затем после вашего запроса $http GET вы заполните ответ на вашу модель $scope.galerijas.

Наконец, мы будем использовать ng-repeat, чтобы перебрать $scope.galerijas и связать его с представлением.Фильтр | используется для упорядочивания отображаемых результатов по идентификатору.

Пример Html

<div ng-app="MainApp" ng-controller="PhoneController">
  <h2>{{ home }}</h2>
  <ul>
    <li ng-repeat="x in galerijas | orderBy:'id'"> 
      <figure class="figure">
        <img src="{{ x.slika }}" class="figure-img img-fluid rounded" alt="{{ x.naziv }}">
        <figcaption class="figure-caption text-right">{{ x.naziv }}</figcaption>
      </figure>
    </li>
  </ul>

  <button type="button" ng-click="getRequest()">Get Galerija</button>
</div>

Пример сценария

var app = angular.module("MainApp", []);
app.controller("PhoneController", function($scope, $http) {
  $scope.home = "This is the homepage";
  $scope.galerijas = []; // This will hold all our galerija after ajax request;

  $scope.getRequest = function() {
    console.log("I've been pressed!");
    $http.get("https://api.myjson.com/bins/12qiaa")
      .then(function successCallback(response) {
        console.log(response.data.galerija);
        $scope.galerijas = response.data.galerija; // populate from api;

      }, function errorCallback(response) {
        console.log("Unable to perform get request");
      });

    console.log($scope.galerijas);
  }
});

А вот пример скрипта:https://jsfiddle.net/tbxmfarz/3/