我正在尝试做一个简单的练习，但没有成功。我认为我没有适本地调用 Controller 变量。我被封锁了。我该如何修复此代码？ 结果页面显示:{{dish.name}} {{dish.label}} {{dish.price |货币}}
<html lang="en" ng-app="a">
<head>.... </head>
<body>
<div class="container">
<div class="row row-content" ng-controller="dishDetailController as dishDC">
<div class="col-xs-12">
<p>Put the dish details here</p>
<div class="media-body">
<ul class="media-list">
<li class="media" ng-repeat="dish in dishDC.dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="a">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-9 col-xs-offset-1">
<p>Put the comments here</p>
</div>
</div>
</div>
<script src="../bower_components/angular/angular.min.js"></script>
<script>
var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function() {
var dishes={
name:'a',
image: 'images/a.png',
category: 'a',
label:'a',
price:'7.88',
description:'a',
};
this.dishes = dishes;
});
</script>
</body>
</html>
最佳答案
ng-repeat 需要一个数组并将迭代它。您传递的对象不是数组。改成对象数组应该就可以了。
<div class="container">
<div class="row row-content" ng-controller="dishDetailController as dishDC">
<div class="col-xs-12">
<p>Put the dish details here</p>
<div class="media-body">
<ul class="media-list">
<li class="media" ng-repeat="dish in dishDC.dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="a">
</a>
</div>
{{dish.name}}
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-9 col-xs-offset-1">
<p>Put the comments here</p>
</div>
</div>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function() {
this.dishes=[{
name:'James',
image: 'images/James.png',
category: 'HouseHold',
label:'Lab',
price:'7.88',
description:'Desc',
}];
});
</script>
关于javascript - 使用 ng-controller 指令从 AngularJS 开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35259207/