Foundation For Apps, Angular, отображать данные из JSON

Я использую Foundation for Apps, который содержит части AngularJS. Я пытаюсь отобразить содержимое локального файла JSON, получив к нему доступ через контроллер, а затем отобразив результаты в «карточках». В идеале набор данных также доступен для поиска.

Прямо сейчас я просто реализовал страницу: --- имя: URL-адрес результатов: / Контроллер результатов: ProvidersCtrl ---

<div class="grid-container">
    <div class="grid-block">
        <div ng-model="providers" class="grid-content">
            {{providers}}
        </div>
    </div>
</div>

И этот код в controllers.js:

var myApp = angular.module('application',[]);

App.controller('ProvidersCtrl', function($scope, $http) {
    $http.get('providers.json')
    .then(function(res){
        $scope.providers = res.data;
    });
});

Вот мой раздел заголовка index.html:

<!doctype html>
<html lang="en" ng-app="application">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Provider Directory</title>
    <link href="/assets/css/app.css" rel="stylesheet" type="text/css">
    <script src="/assets/js/foundation.js"></script>
    <script src="/assets/js/templates.js"></script>
    <script src="/assets/js/routes.js"></script>
    <script src="/assets/js/controllers.js"></script>
    <script src="/assets/js/app.js"></script>
  </head>

Я просто не уверен, что я делаю неправильно, и я уверен, что это просто неправильное понимание angular и данных.

Ссылочно, вот мои данные JSON (образец).

[
  {
    "specialty": "Cardiovascular Disease",
    "registered": "Sunday, January 25, 2015 5:37 AM",
    "about": "Enim sint dolor sint ad ad proident eiusmod amet et laborum. Commodo esse cupidatat aute do non elit sunt incididunt id cillum eu cupidatat aliquip. Labore id culpa esse qui incididunt pariatur veniam ea ex occaecat anim dolor.\r\n",
    "address": "148 Metropolitan Avenue, Dyckesville, California, 9414",
    "fax": "+1 (844) 572-2968",
    "phone": "+1 (893) 544-2135",
    "email": "[email protected]",
    "company": "FUELTON",
    "last_name": "Rosales",
    "first_name": "Gilliam",
    "guid": "aeeb1cb4-92b1-43d2-af9d-8735ab791ea7",
    "index": 0,
    "_id": "55595e5258a89e4168d46cdf"
  },
  {
    "specialty": "Urology",
    "registered": "Friday, November 21, 2014 8:24 AM",
    "about": "Lorem occaecat qui officia duis ad Lorem fugiat ex mollit eiusmod laborum et sit. Laboris proident proident quis aliquip mollit dolor laborum anim aute dolor aliqua irure. Qui sint sit exercitation esse fugiat magna amet amet ut elit elit. Non magna ea dolore aliqua esse qui. Irure elit cupidatat enim cillum dolore. Adipisicing irure sunt sint dolor laboris do. Cillum magna excepteur est nulla nisi id exercitation id officia quis aliqua.\r\n",
    "address": "501 Marconi Place, Shindler, Utah, 1246",
    "fax": "+1 (823) 424-3183",
    "phone": "+1 (976) 574-3689",
    "email": "[email protected]",
    "company": "ECLIPTO",
    "last_name": "Flynn",
    "first_name": "Dickson",
    "guid": "55189c5b-b0ff-403a-9e54-2db2350fb5d6",
    "index": 1,
    "_id": "55595e529c0a3722914b713a"
  }

Изменить: вот что я вижу в Dev Tools: Изменить 2: удалены инструменты разработчика, они были исправлены, когда я переместил контроллер в app.js. Также внесены небольшие исправления в json, удалив providers = ' с самого начала.

Все равно ничего не показывает :)


javascript json controller angularjs zurb-foundation
person Mike Earley    schedule 18.05.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Обновленный ответ:

var myApp = angular.module('application',[]);

myApp.controller('ProvidersCtrl', function($scope, $http) {
    $http.get('providers.json')
    .then(function(res){
        $scope.providers = res;
    });
});

Для шаблона:

<div class="grid-container">
    <div class="grid-block">
        <div ng-model="providers" ng-repeat="(key, value) in providers" class="grid-content">
            <span>{{key}} : </span><span>{{value}}</span>
        </div>
    </div>
</div>
person Vishal Kumar Verma    schedule 18.05.2015
comment
Спасибо за быстрый улов, это не сработало. Я собираюсь добавить свои сообщения об ошибках в свой вопрос, надеюсь, это поможет. - person Mike Earley; 18.05.2015
comment
Не могли бы вы проверить здесь: pro.jsonlint.com, правильно ли вы указали json. - person Vishal Kumar Verma; 18.05.2015
comment
проверено, мне пришлось удалить провайдеров = ' с самого начала, но это все равно не работает. - person Mike Earley; 18.05.2015

arrow_upward
0
arrow_downward

У меня была ТОННА неправильных вещей, заимствованных тут и там и везде, и вот окончательный результат:

контроллер app.js =

var myApp = angular.module('application');
myApp.controller('ProvidersCtrl', function($scope, $http) {
    $http.get('/providers.json').then(function(res){
      $scope.providers = res.data;
    });
  });

Примечания: (1) var myApp должно было быть angular.module('application');, потому что это то, как фонд для приложений называет его в предыдущих строках app.js. Для простоты я поместил provider.json в корневой каталог. Я удалил файл controllers.js и просто поместил код в app.js.

результаты.html =

---
name: results
url: /results
---
<div class="grid-container">
    <div class="grid-block">
        <div class="grid-content">
            <div ng-controller="ProvidersCtrl">
              {{ providers }}
            </div>
        </div>
    </div>
</div>

(1) Я использовал ng-controller, а не ng-model для привязки данных к div. (2) Я исключил использование базового соглашения для приложений о указании контроллера в заголовке.

person Mike Earley    schedule 18.05.2015