Angular JS提取JSON数据

Question

I'm trying to learn Angular JS to create web applications. I've gone through Angular JS's phonecatApp tutorial online, and am trying to adapt it to store some information about bases

I currently have the index.html file that calls the ngview directive. I've split the html pages into two templates and two respective controllers.

I'm also using a custom service to get information from a JSON file that has the data I'm working with.

Here is my code "app.js" that invokes the respective pages and templates:

'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'
      });
  }]);

Here is the "controllers.js" file:

'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});
}]);

Here is the "services.js" file which should fetch the JSON information from bases.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}
    });
  }]);

The JSON file has a several objects that consist of only two properties: "Bases" and "Information".

Edit:

The JSON data is in the following format:

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

I substituted the locations of the bases, they are strings that include letters, ",", and ".".

What I am trying to do is simply display the value of the "Bases" property in the brac-detail.html of the selected base in the dropdown menu (posted below). Basically, I'm trying to put the selected Base from the list (of the property "Bases" in the JSON data) as a header, so something like <h3>{{currentBase}}</h3> . I'm not sure how to refer to the current, picked base from the dropdown menu. Can anyone shed some light on how this is done? Thanks and please let me know if you'd like me to clarify anything.

Here is the code for the main page ( 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>

I'm getting the following errors when I run the application in Firefox: "not well-formed" - brac-list.html, line 24 "syntax error" - bases.json, line 1

and when I click a menu item from the dropdown, I get the following: "Error: [$resource:badcfg] Error in resource configuration. Expected response to contain an object but got an array"

Answer 1

Good going, I would suggest to use promises while returning data from service to any controller. like this example: Example

And assign your array to a variable which will be accessible from view after the call. Let me know if you have any other query.