AngularJs学习日记[6]:ng-repeat指令

demo:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
<div>

<script type="text/javascript" src="angular.min.js"></script>

</body>
</html>

运行效果:

仅仅一个ng-repeat指令就同时实现了数组数据的遍历,和html的li结构的循环。

更复杂

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x	in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script type="text/javascript" src="angular.min.js"></script>

</body>
</html>

一些的情况:


你可能感兴趣的:(AngularJs学习日记[6]:ng-repeat指令)