佚名通过本文主要向大家介绍了页面获取json数据,页面显示json数据,json数据循环,json数据,js解析json数据等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
问题:ng-repeat 怎样循环出 json数据,并把循环出来的数据渲染到页面中?
描述:
解决方案1:
描述:
刚刚接触angularjs,求各位大神指教,感激不尽!
解决方案1:
<div ng-init="friends = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
]">
I have {{friends.length}} friends. They are:
<input type="search" ng-model="q" placeholder="filter friends..." />
<ul>
<li ng-repeat="friend in friends | filter:q">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
</div>
手册例子↑
解决方案2:http://docs.ngnice.com/api/ng/directive/ngRepeat
解决方案3:在 ng-repeat
中,使用 d in data
,可以遍历数组中的每一个成员,如果成员本身就是一个直接的数据,则可以直接使用 d
来显示,如果成员还是一个对象,可以使用 d.id
的方法,来访问成员的各个成员。当然,如果直接显示 d
对象,将会以 JSON 的方式来显示。
<script>
$scope.data = [
{id: 0, name: "Sid"},
{id: 1, name: "SegmentFault"},
{id: 2, name: "Github"},
{id: 3, name: "Gitcafe"},
{id: 4, name: "Coding.NET"},
];
</script>
<body>
<p ng-repeat="d in data">id: {{d.id}}, name: {{d.name}}</p>
</body>