角度循环多维json对象不起作用

问题描述 投票:1回答:2

我正在练习角度,并认为制作购物车很酷,我已经下载了一个预制的网站模板,该模板显示了类别中的项目,但其布局的方式非常像

<div class="row">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>

因此,类别网格中的每一行都是包含3个项目的无序列表的div

这是我的角度代码:

<div ng-app="CategoryLoader" ng-controller="CatLoader">
    <div ng-repeat="row in items">
    <ul>
        <li class="new" ng-repeat="item in row">
            <div class="catThum"><img src="http://cart.asccio.net/images/OXO---Homepage_39.jpg" alt="" /><div class="new"></div></div>
            <div class="catDetail">
                <h4><a href="#">{{item.name}}</a></h4>
                <p>{{item.price}}</p>
            </div>
        </li>

    </ul>
</div>

    <div class="clr"></div>
</div>
<script type="text/javascript">
    var app = angular.module("CategoryLoader", []);
    app.controller("CatLoader", function($scope, $http) {
        $http.get('http://cart.asccio.net/category/items/7').
            success(function(data, status, headers, config) {
                $scope.items = data;
                alert("Loaded all items");

            }).
            error(function(data, status, headers, config) {
                // log error
                alert("error");
            });
    });
</script>

正如你所看到的,我将json数据分成每个段3个项目,所以它应该与设计很好但是只显示一个项目,我在浏览器控制台中收到此错误

"[cycle] terminating; zero elements found by selector" jquery.cycle.js:10:180
"Error: this.parentNode is null
jQuery.prototype.after/<@http://cart.asccio.net/js/jquery-1.3.2.js:274:4
jQuery.prototype.domManip@http://cart.asccio.net/js/jquery-1.3.2.js:522:1
jQuery.prototype.after@http://cart.asccio.net/js/jquery-1.3.2.js:273:1
Sd</this.$get</<.enter@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:140:127
ue</<.link/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:185:315
B/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:41:449
W/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:43:170
A@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:46:352
ue</<.link/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:185:1
zd/this.$get</h.prototype.$watchCollection/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:98:313
zd/this.$get</h.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:99:209
zd/this.$get</h.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:101:473
f@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:66:319
F@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:70:242
md/</B.onreadystatechange@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:71:277

渲染结果的图像:

它应该是什么样子的形象:

我究竟做错了什么?

javascript jquery json angularjs
2个回答
0
投票

我包括Jquery库以及angular.js库,这导致了问题,很可能是可比性问题。

现在工作正常!


0
投票

让我们调试它,添加一些行:

success(function(data, status, headers, config) {
    console.log(JSON.stringify(data)); // print to console windows
    alert(JSON.stringify(data)); // or popup a window
    $scope.items = data;
}
© www.soinside.com 2019 - 2024. All rights reserved.