javascript - Angular 循环多维 json 对象不起作用

Question

我正在练习 Angular，认为制作一个购物车会很酷，我已经下载了一个预制的网站模板，该模板按类别显示项目，但其布局方式非常相似

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

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

这是我的 Angular 代码:

<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

渲染结果的图像:

它“应该”是什么样子的图像:

我做错了什么？

Answer 1

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

现在工作正常!