Доступ к коллекции внутри json объекта углового

Question

Я новичок в Angular в следующем контроллере, мне нужно получить доступ к хранилищу объектов в моем HTML. Но это не работает. Любая помощь

(function () {
    'use strict';


    angular.module('app').controller('BookController', ['$scope', function ($scope) {
     $scope.book = {
      id: 1,
      name: 'Harry Potter',
      author: 'J. K. Rowling',
      stores: [
     { id: 1, name: 'Barnes & Noble', quantity: 3 },
     { id: 2, name: 'Waterstones', quantity: 2 },
     { id: 3, name: 'Book Depository', quantity: 5 }
      ]
     };
    }]);
    });

 <div ng-controller="BookController">
  
   
      {{book.stores}}
   </div>

Answer 1

Сначала вам нужно вызвать анонимную функцию, используя () после последней закрывающей скобки и перед последней точкой с запятой, чтобы последняя строка выглядела следующим образом: })();,

Вы должны определить угловой module сначала, а затем изменить его с угловым компонентом, как controller, service, factory, directive, filters, так далее.

angular.module('app', [])

затем добавьте ng-app="app" на твоей странице.

наценка

<div ng-app="app" ng-controller="BookController">
    {{book.stores}}
</div>

Плункр Здесь

Обновить

Если предположить, что у вас есть несколько store внутри stores объект, и вы хотите показать их на HTML, то для этого вы могли бы ng-repeat директивы. Это будет повторять каждый элемент на HTML

<div ng-repeat="s in book.stores">
   <span>{{s.name}}</span>
   <input type="text" ng-model="s.name" />
   <input type="numeric" ng-model="s.quantity" />
</div>

Обновлен Планкр