Question

我正在尝试学习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中的“Bases”属性的值（在下面发布）。基本上，我试图将列表中的所选Base（JSON数据中的属性“Bases”）作为标题放置，如<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

好的，我建议在将数据从服务返回到任何控制器时使用promises。像这个例子：Example

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

Angular JS提取JSON数据

1 个答案: