Question

我第一次使用角度建立一个网站并遇到了问题。点击“查看项目”后，它应该返回特定于该项目的数据。现在，如果我控制台.log我的js我可以看到每个人都在那里。在控制台中我还可以看到所有的html。所以我的问题是;可能导致这种情况的原因是什么？

    angular
  .module('app')
  .controller('werkCtrl', ['$scope', '$http', '$location', function($scope, $http, $location) {
    $scope.title = "Werk";
    $scope.portfolio_items = [];
    $scope.detail_items = {};
    $scope.beschrijving = "Een verzameling van mijn favoriete werken.";

    var getPortfolioItems = function() {
        $http.get('data/work.json').success(function(data){ 
            $scope.portfolio_items = data;
        });
    }
    getPortfolioItems();

    var getDetailItem = function() {
        var route = $location.path().substring(1).split('/')[1];
        $http.get('data/work.json').success(function(data) {
            for (key in data) {
              if (data[key].slug == route) {
                $scope.detail_items = data[key];
                console.log(data);
              }
            }
        })
    }
    getDetailItem();
  }]);

正如您在此处所见，我正在从json文件加载所有数据。我正在遍历数据以查找引用项目的特定URL的'slug'。这部分似乎是有效的，因为每个产品都有一个独特的slu ..

<section class="web_wrapper">
<div ng-repeat="item in detail_items">
    <section class="head_image">
        <figure>
            <img ng-src="{{ item.headerimg }}"></img>
            <figcaption>
                <h1>{{ item.title }}</h1>
                <p>{{ item.beschrijvingfoto }}</p>
            </figcaption>
        </figure>
    </section>
    <section class="details">
        <h1>{{ item.name }}</h1>
        <h2>{{ item.date }}</h2>
        <img ng-src="{{item.image}}">
        <div class="text_wrap">
            <p>{{ item.beschrijving }}</p>
            <p>{{ item.beschrijving2 }}</p>
        </div>
    </section>
</div>

这是详细页面，其中应显示上述数据。

 angular
  .module('app', [
    'ui.router'
  ])
  .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'templates/home.html',
        controller: 'homeCtrl'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'templates/about.html',
        controller: 'aboutCtrl'
      })
      .state('werk', {
        url: '/werk',
        templateUrl: 'templates/werk.html',
        controller: 'werkCtrl'
      })
      .state('werkdetail', {
        url: '/werkdetail/:slug',
        templateUrl: 'templates/werkdetail.html',
        controller: 'werkCtrl'
      })
  }])

最后这是我的路线。现在，我很抱歉没有证明一个小提琴，因为我不确定如何正确设置一个角度文件。我希望上面链接的网站能为您提供所需的任何其他数据。

[
 {  
    "title" : "werk enzo",
    "name" : "product 1",
    "date" : "august 13",
    "image" : "http://placehold.it/400x200",
    "slug" : "product-1",
    "beschrijving" : "blabla",
    "beschrijving2" : "abba abba",
    "headerimg" : "http://placehold.it/1440x400",
    "beschrijvingfoto" : "ding over foto"
},
{   
    "title" : "werk enzo",
    "name" : "product 2",
    "date" : "august 3",
    "image" : "http://placehold.it/400x200",
    "slug" : "product-2",
    "beschrijving" : "blabla",
    "beschrijving2" : "abba abba",
    "headerimg" : "http://placehold.it/1440x400",
    "beschrijvingfoto" : "ding over foto"
},
{   
    "title" : "werk enzo",
    "name" : "product 3",
    "date" : "august 22",
    "image" : "http://placehold.it/400x200",
    "slug" : "product-3",
    "beschrijving" : "blabla",
    "beschrijving2" : "abba abba",
    "headerimg" : "http://placehold.it/1440x400",
    "beschrijvingfoto" : "ding over foto"
},
{   
    "title" : "werk enzo",
    "name" : "product 4",
    "date" : "august 29",
    "image" : "http://placehold.it/400x200",
    "slug" : "product-4",
    "beschrijving" : "blabla",
    "beschrijving2" : "abba abba",
    "headerimg" : "http://placehold.it/1440x400",
    "beschrijvingfoto" : "ding over foto"
}

这是我从中获取所有数据的Json文件。

Answer 1

这是因为您将对象而不是数组传递给模板：

    var getDetailItem = function() {
        var route = $location.path().substring(1).split('/')[1];
        $http.get('data/work.json').success(function(data) {
            for (key in data) {
              if (data[key].slug == route) {
                // data[key] is object
                $scope.detail_items = data[key];

                // you print the whole data array to console but actually passing just one object to $scope.detail_items
                console.log(data);
              }
            }
        })
    }

Answer 2

你知道吗......

for (key in data) {}

...不是迭代数组的最好方法吗？

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

如果您需要数组，请使用

for (i=0;i<data.length;i++) {}

代替。

希望它有所帮助！

Angular返回一个空页面，即使所有数据都在那里

2 个答案: