Angularjs ng模板页面中的重复显示没有数据_Angularjs

Angularjs ng模板页面中的重复显示没有数据

angularjs

Angularjs ng模板页面中的重复显示没有数据,angularjs,Angularjs,我正在尝试学习angular，我一直在尝试从json对象重复一个div。我已经确认返回了json对象，如果我只是正确地放置了段落标记display myData，但是当我在review.html中检查html时，我的div没有重复，甚至没有显示。根据jsonlint，我的json也是有效的。你知道这里有什么问题吗这里是index.html <!doctype html> <html lang="en"> <head> <meta charset="UT

我正在尝试学习angular，我一直在尝试从json对象重复一个div。我已经确认返回了json对象，如果我只是正确地放置了段落标记display myData，但是当我在review.html中检查html时，我的div没有重复，甚至没有显示。根据jsonlint，我的json也是有效的。你知道这里有什么问题吗

这里是index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>All The Reviews</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<script src="myScript.js"></script>
</head>

<body ng-app="myApp">
<div ng-controller="homeController">
 <div>
  <nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#/">Home<span class="sr-only">(current)</span></a></li>
    <li><a href="#/reviews">Reviews</a></li>
    <li><a href="#/create">Create</a></li>
   </ul>
  </nav>
 </div>
<br/>
  <div ng-view class="jumbotron"></div>
</div>
</body>
</html>

这是我的json数据

[{"products":[{"productId":"1","name":"Fluffy Eggs"},{"productId":"1","name":"Crispy Bacon"}]},
{"reviews":[{"reviewId":"1","title":"These are some nice eggs.","productId":"1","description":"Eggs that are just the right temp and extremely fluffy."},
{"reviewId":"2","title":"mmm, bacon","productId":"2","description":"it's pretty crispy. Maybe a little too crispy."}]},
{"ratings":[{"ratingId":"1","reviewId":"1","rating":"5"},
{"ratingId":"2","reviewId":"1","rating":"4"},
{"ratingId":"3","reviewId":"2","rating":"1"},
{"ratingId":"4","reviewId":"1","rating":"5"},
{"ratingId":"5","reviewId":"1","rating":"5"},
{"ratingId":"6","reviewId":"2","rating":"5"},
{"ratingId":"7","reviewId":"2","rating":"4"},
{"ratingId":"8","reviewId":"1","rating":"5"}]}]

感谢您的所有输入

您的JSON结构是一个包含三个对象的数组，其属性包括产品、评论和评级。因此，您必须选择第二项来循环您的评论：

<div ng-repeat="review in myData[1].reviews">{{review.title}}</div>

{{review.title}

将您的json更改为：

{"products":[{"productId":"1","name":"Fluffy Eggs"},{"productId":"1","name":"Crispy Bacon"}],
"reviews":[{"reviewId":"1","title":"These are some nice eggs.","productId":"1","description":"Eggs that are just the right temp and extremely fluffy."},
{"reviewId":"2","title":"mmm, bacon","productId":"2","description":"it's pretty crispy. Maybe a little too crispy."}],
"ratings":[{"ratingId":"1","reviewId":"1","rating":"5"},
{"ratingId":"2","reviewId":"1","rating":"4"},
{"ratingId":"3","reviewId":"2","rating":"1"},
{"ratingId":"4","reviewId":"1","rating":"5"},
{"ratingId":"5","reviewId":"1","rating":"5"},
{"ratingId":"6","reviewId":"2","rating":"5"},
{"ratingId":"7","reviewId":"2","rating":"4"},
{"ratingId":"8","reviewId":"1","rating":"5"}]}

我也试过了，但是我得到了一个关于非空白字符的错误。谢谢

<div ng-repeat="review in myData[1].reviews">{{review.title}}</div>

{"products":[{"productId":"1","name":"Fluffy Eggs"},{"productId":"1","name":"Crispy Bacon"}],
"reviews":[{"reviewId":"1","title":"These are some nice eggs.","productId":"1","description":"Eggs that are just the right temp and extremely fluffy."},
{"reviewId":"2","title":"mmm, bacon","productId":"2","description":"it's pretty crispy. Maybe a little too crispy."}],
"ratings":[{"ratingId":"1","reviewId":"1","rating":"5"},
{"ratingId":"2","reviewId":"1","rating":"4"},
{"ratingId":"3","reviewId":"2","rating":"1"},
{"ratingId":"4","reviewId":"1","rating":"5"},
{"ratingId":"5","reviewId":"1","rating":"5"},
{"ratingId":"6","reviewId":"2","rating":"5"},
{"ratingId":"7","reviewId":"2","rating":"4"},
{"ratingId":"8","reviewId":"1","rating":"5"}]}