javascript - Angular JS 提取 JSON 数据

Question

我正在尝试学习 Angular JS 来创建 Web 应用程序。我已经经历过Angular JS's phonecatApp tutorial在线，并正在尝试对其进行调整以存储有关基地的一些信息

我目前有调用 ngview 指令的index.html 文件。我已将 html 页面拆分为两个模板和两个各自的 Controller 。

我还使用自定义服务从包含我正在使用的数据的 JSON 文件中获取信息。

这是我的代码“app.js”，它调用相应的页面和模板:

'use strict';

/* App Module */

var bracApp = angular.module('bracApp', [
  'ngRoute',
  'bracControllers',
  'bracServices',
  'myDropdown'
  /* creates above as dependencies of the application module */
]);

bracApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/base', {
        templateUrl: 'partials/brac-list.html',
        controller: 'bracListCtrl'
      }).
      when('/base/:baseId', {
        //* everything with ":" beforehand is extracted into the $routeParams object *//
        templateUrl: 'partials/brac-detail.html',
        controller: 'bracDetailCtrl'
      }).
      otherwise({
        redirectTo: '/base'
      });
  }]);

这是“controllers.js”文件:

'use strict';

/* Controllers */

var bracControllers = angular.module('bracControllers', [])

bracControllers.controller('bracListCtrl', ['$scope', 'Base', function($scope, Base) {
  $scope.bases = Base.query();
  $scope.orderProp = 'Bases';
}]);

bracControllers.controller('bracDetailCtrl', ['$scope', '$routeParams', 'Base', function($scope,
$routeParams, Base) {
  $scope.base = Base.get({baseId: $routeParams.baseId});
}]);

这里是“services.js”文件，它应该从bases.json中获取JSON信息:

'use strict';

/* Services - used to link data to application from JSON*/

var bracServices = angular.module('bracServices', ['ngResource']);

bracServices.factory('Base', ['$resource',
  function($resource) {
    return $resource('bases.json', {}, {
      query: {method: 'GET', params:{baseId:'Bases'}, isArray:true}
    });
  }]);

JSON 文件有多个对象，仅包含两个属性:“基础”和“信息”。

编辑:

JSON 数据的格式如下:

[{"Bases":"Base Location 1","Information":"Minimal "},
{"Bases":"Base Location 2","Information":"Minimal "},
{"Bases":"Base Location 3","Information":"Minimal "},
{"Bases":"Base Location 4","Information":"Minimal "}]

我替换了碱基的位置，它们是包含字母“，”和“.”的字符串。

我想做的只是在下拉菜单中所选基地的 brac-detail.html 中显示“基地”属性的值(如下所示)。基本上，我试图将列表(JSON 数据中的“Bases”属性)中选定的 Base 作为 header ，例如 <h3>{{currentBase}}</h3> 。我不确定如何引用当前从下拉菜单中选择的基础。任何人都可以阐明这是如何完成的吗？谢谢，如果您希望我澄清任何事情，请告诉我。

这是主页的代码(工作)

<div id="background">
  <div id="pagebackground">

<div id="table1">

  <div id="BracDropdown" class="btn-group" dropdown is-open="status.isopen">
    <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
      BRAC Bases <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li ng-repeat="base in bases | orderBy: orderProp">
        <a href="#/base/{{base.Bases}}">{{base.Bases}}</a>
      </li>
    </ul>
  </div>

  <div id="selector">
    <p id="sortby"> Sort by:</p>
    <select ng-model="orderProp">
      <option value="Bases">Name</option>
      <option value="Information">Information</option>
    </select>
  </div>

</div>

当我在 Firefox 中运行该应用程序时，出现以下错误: “格式不正确” - brac-list.html，第 24 行 “语法错误”-bases.json，第 1 行

当我单击下拉菜单中的菜单项时，我得到以下信息: “错误:[$resource:badcfg] 资源配置错误。预期响应包含对象，但获得了数组”

Answer 1

进展顺利，我建议在将数据从服务返回到任何 Controller 时使用 promise 。 就像这个例子:Example

并将数组分配给一个变量，该变量在调用后可以从 View 中访问。如果您有任何其他疑问，请告诉我。