Angular JS 提取 JSON 数据答案

【问题标题】：Angular JS extracting JSON dataAngular JS 提取 JSON 数据
【发布时间】：2014-08-12 14:25:47
【问题描述】：

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

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

我还使用自定义服务从包含我正在处理的数据的 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});
}]);

这是应该从 bases.json 获取 JSON 信息的“services.js”文件：

'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 文件有几个对象，它们仅包含两个属性：“Bases”和“Information”。

编辑：

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 中的“基础”属性的值（发布在下面）。基本上，我试图将列表中选择的 Base（JSON 数据中的属性“Bases”）作为标题，比如<h3>{{currentBase}}</h3>。我不确定如何从下拉菜单中引用当前选择的基础。任何人都可以阐明这是如何完成的吗？谢谢，如果您希望我澄清任何事情，请告诉我。

这是主页的代码（working）

<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] 资源配置错误。预期响应包含一个对象但得到一个数组”

【问题讨论】：

可以添加 JSON 吗？
添加了包含 JSON 文件示例的编辑。
你在哪里将控制器连接到BracDropdown div？您是否正确实例化Bases？页面是否呈现以及它为hrefs 列出了什么？考虑创建一个plunker 来展示它。

标签： javascript html json angularjs

【解决方案1】：

很好，我建议在将数据从服务返回到任何控制器时使用承诺。比如这个例子：Example

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

【讨论】：