我正在练习角度,并认为制作购物车很酷,我已经下载了一个预制的网站模板,该模板显示了类别中的项目,但其布局的方式非常像
<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
渲染结果的图像:
它应该是什么样子的形象:
我究竟做错了什么?
我包括Jquery库以及angular.js库,这导致了问题,很可能是可比性问题。
现在工作正常!
让我们调试它,添加一些行:
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;
}