Question

我正在尝试创建一个文件浏览器类型的项目。我正在使用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

请帮助我，因为我无法理解这一点。

Answer 1

问题是detailCtrl你总是将mainData设置为最后一个元素。快速修复：

aObj& bObj = *(getG()->getO(bObjId));

Plunker编辑：$elemMatch

扩展编辑：

这可行，但不是以角度工作的方式，您应该将数据访问包装到工厂中，然后在加载视图之前解析路由器中的数据模型。现在你每次都要获取数据，那时你应该只进行一次。

无法从json文件获取数据

1 个答案: