无法从json文件获取数据

debugcn 发表于 Dev

工作

我正在尝试创建一种文件资源管理器类型的项目。我为此使用angularjs。问题是我无法从手动创建的json文件中获取数据。

我的json数据

[
    {
        "id": 0,
        "name": "Nature",
        "images": [
            {
                "id": 0,
                "src": "images/nature/01.jpg",
                "thumb": "images/nature/01-thumb.jpg",
                "name": "Nature View"
            },
            {
                "id": 1,
                "src": "images/nature/02.jpg",
                "thumb": "images/nature/02-thumb.jpg",
                "name": "Nature View"
            },
            {
                "id": 2,
                "src": "images/nature/03.jpg",
                "thumb": "images/nature/03-thumb.jpg",
                "name": "Nature View"
            },
            {
                "id": 3,
                "src": "images/nature/04.jpg",
                "thumb": "images/nature/04-thumb.jpg",
                "name": "Nature View"
            }
        ]
    },
    {
        "id": 1,
        "name": "Lanscape",
        "images": [
            {
                "id": 0,
                "src": "images/landscape/01.jpg",
                "thumb": "images/landscape/01-thumb.jpg",
                "name": "Landscape View"
            },
            {
                "id": 1,
                "src": "images/landscape/02.jpg",
                "thumb": "images/landscape/02-thumb.jpg",
                "name": "Landscape View"
            },
            {
                "id": 2,
                "src": "images/landscape/03.jpg",
                "thumb": "images/landscape/03-thumb.jpg",
                "name": "Landscape View"
            },
            {
                "id": 3,
                "src": "images/landscape/04.jpg",
                "thumb": "images/landscape/04-thumb.jpg",
                "name": "Landscape View"
            }
        ]
    },
    {
        "id": 2,
        "name": "Movies",
        "images": [
            {
                "id": 0,
                "src": "images/movies/01.jpg",
                "thumb": "images/movies/01-thumb.jpg",
                "name": "Ipsum View"
            },
            {
                "id": 1,
                "src": "images/movies/02.jpg",
                "thumb": "images/movies/02-thumb.jpg",
                "name": "Ipsum View"
            },
            {
                "id": 2,
                "src": "images/movies/03.jpg",
                "thumb": "images/movies/03-thumb.jpg",
                "name": "Ipsum View"
            },
            {
                "id": 3,
                "src": "images/movies/04.jpg",
                "thumb": "images/movies/04-thumb.jpg",
                "name": "Ipsum View"
            }
        ]
    }
]

这是一个文件浏览器，因此认为它应该具有类别名称，并且其中将包含图像。这就是这种结构的原因。

index.html

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
    <script src="js/app.js"></script>
  </head>

  <body>
    <div ng-view></div>
  </body>

</html>

app.js

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'home.html',
        controller: 'mainCtrl'
      }).
      when('/:id', {
        templateUrl: 'detail.html',
        controller: 'detailCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
});

app.controller('mainCtrl', function($http, $scope) {
  $http.get('data.json').success(function (data) {
    $scope.mainData = data;
  });
});

app.controller('detailCtrl', function($http, $scope, $routeParams) {
  $scope.id = $routeParams.id;
  $http.get('data.json').success(function (data) {
    angular.forEach(data, function (temp) {
        $scope.mainData = temp.images;
    });
  });
});

home.html

<ul ng-repeat="data in mainData">
  <li><a href="#/{{data.id}}">{{data.name}}</a></li>
</ul>

detail.html

<div ng-repeat="data in mainData">
<h1>{{data.name}}</h1>
<img src="{{data.thumb}}" />
</div>

当我循环进入图像时，每个id的数据显示都相同。我要尝试的是单击自然时要显示自然图像及其数据。我创建了一个plunkr http://plnkr.co/edit/aR7PM2KQw7XsCtGTYvtI?p=preview

请帮我解决这个问题，因为我在理解此问题时遇到了麻烦。

vktr

问题是您始终将mainData设置为最后一个元素的detailCtrl。快速解决：

app.controller('detailCtrl', function($http, $scope, $routeParams) {
  $scope.id = $routeParams.id;
  $http.get('data.json').success(function (data) {
        $scope.mainData = data[$scope.id].images;
  });

});

已编辑Plunker：http：//plnkr.co/edit/3G2TFGvgfW4EihhS4oo4？p = preview

扩展编辑：

这是可行的，但不是按角度工作的方法，您应该将数据访问包装到工厂中，然后在加载视图之前在路由器中解析数据模型。现在，您每次都只应提取一次数据，因此每次都需要提取数据。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。