Javascript 角度循环多维json对象不工作
我正在使用angular进行练习,并认为制作购物车会很酷,我下载了一个预先制作的网站模板,可以按类别显示物品,但其布局方式与Javascript 角度循环多维json对象不工作,javascript,jquery,json,angularjs,Javascript,Jquery,Json,Angularjs,我正在使用angular进行练习,并认为制作购物车会很酷,我下载了一个预先制作的网站模板,可以按类别显示物品,但其布局方式与 <div class="row"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div> 项目1 项目2 项目3 因此,类别网格中的每一行都是一个div,其中包含一个由3项
<div class="row">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
- 项目1
- 项目2
- 项目3
因此,类别网格中的每一行都是一个div,其中包含一个由3项组成的未排序列表
这是我的角度代码:
<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>
-
{{item.price}}
var app=angular.module(“CategoryLoader”,[]);
app.controller(“CatLoader”,函数($scope,$http){
$http.get('http://cart.asccio.net/category/items/7').
成功(函数(数据、状态、标题、配置){
$scope.items=数据;
警报(“已加载所有项目”);
}).
错误(函数(数据、状态、标题、配置){
//日志错误
警报(“错误”);
});
});
正如您所见,我将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
“[cycle]终止;选择器找到零元素”jquery.cycle.js:10:180
“错误:this.parentNode为空
在/之后,我包括了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;
}
请提供json数据,您的问题错误似乎发生在jquery.cycle.js
,如输出所示,但我们在您提供的代码中没有看到任何设置或使用jquery.cycle的内容。将原始json数据放入脚本中,它现在似乎可以工作了?哈哈