Question

我有一个JSON以下JSON文件：

[
  {
      "pageID":         1,
      "pageName":       "Home Page",
      "pageHead":       "Home Page Title"
  },
  {
      "pageID":         2,
      "pageName":       "Second Page",
      "pageHead":       "2nd Page Title"
  },
  {
      "pageID":         3,
      "pageName":       "Third Page",
      "pageHead":       "3rd Page Title"
  }
]

我要做的是显示一个页面从JSON文件中获取其标题和标题。

为此，我创建了以下JS代码：

var dbApp = angular.module('dbApp', ['ngSanitize']);
dbApp.controller('dbCtrl', function($scope, $http){
            $http.get('pageDB.json').success(function(data) {                   
                $scope.pageContent = data;  
                $scope.pageHeadDB = data[0].pageHead;
                $scope.pageBodyDB = data[0].pageBody;                   
            }); 
        });

在JS代码中，我使用$scope.pageHeadDB = data[0].pageHead;使用特定索引[1]，但请不要担心这一点，稍后我会将其变为动态。

以下视图应显示我需要的内容：

<html ng-app="dbApp" ng-controller="dbCtrl">
  <head>
    <title>{{pageHeadDB}}</title>
  </head>
  <body>
    <div ng-bind-html="pageBodyDB"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>
</body>
</html>

当我使用[0]这是JSON文件中的第一项时，页面显示数据，但我不明白为什么当我创建索引[1]时它不起作用还是[2]？

有什么想法吗？

Answer 1

我无法使用此代码段工具测试<title>代码问题，但这里的解决方案可以简化您的一些逻辑并且无论页码如何都可以正常运行：

angular
  .module('dbApp', ['ngSanitize'])
  .controller('dbCtrl', dbCtrl);
  
dbCtrl.$inject = ['$window', '$scope', '$http'];
function dbCtrl($window, $scope, $http){
  $scope.page = 0;

  // stubbing ajax call for demo purposes
  // $http.get('pageDB.json').success(function(data) {
  var data = [
    {
      "pageID":         1,
      "pageName":       "Home Page",
      "pageHead":       "Home Page Title"
    },
    {
      "pageID":         2,
      "pageName":       "Second Page",
      "pageHead":       "2nd Page Title"
    },
    {
      "pageID":         3,
      "pageName":       "Third Page",
      "pageHead":       "3rd Page Title"
    }
  ];
  $scope.pageContent = data;
  // }); 
}

<html ng-app="dbApp" ng-controller="dbCtrl">
  <head>
    <title>{{ pageContent[page].pageHead }}</title>
  </head>
  <body>
    <h1>{{ pageContent[page].pageHead }}</h1>
    <div ng-bind-html="pageContent[page].pageName"></div>
    <hr/>
    <label>Page:</label>
    <input type="text" ng-model="page"></input>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>
</body>
</html>

无法在AngularJS中显示JSON项

1 个答案: