几种 angular 循环。。。。

学习angular 有好一段时间， 之前有项目接触到这玩意，那就从基础学起，记录下学习过程中的点点滴滴把。。。。

angular js的循环

1. 第一种也是我们最常见的， 给出一个数组或者数组对象将其打印出来。

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

2. 第二种在项目中学习到的

obj.id as obj.name for obj in objs

<select ng-options="obj.id as obj.name for obj in objs"></select>

这是一种运用于下拉菜单的循环写法。

下文转一个例子（转）http://my.oschina.net/foodon/blog/338698

循环输出列表很多项目在web服务端做，前端做好模版后后端写jsp代码，双方需要紧密合作，分清责任。有些项目由后端提供restful方法，前端用ajax调用自己循环，这种一般是大把的jquery拼字符串，太不直观，有人搞出了js模板，也没好到哪里去。

<! doctype html>

< html ng-app>

< head >

     < meta charset = "utf-8" >

     < title >ng-repeat directive</ title >

</ head >

< body >

< table ng-controller = "CartController" >

     < caption >我的购物车</ caption >

     < tr >

         < th >序号</ th >

         < th >商品</ th >

         < th >单价</ th >

         < th >数量</ th >

         < th >金额</ th >

         < th >操作</ th >

     </ tr >

     < tr ng-repeat = "item in items" >

         < td >{{$index + 1}}</ td >

         < td >{{item.name}}</ td >

         < td >{{item.price | currency}}</ td >

         < td >< input ng-model = "item.quantity" ></ td >

         < td >{{item.quantity * item.price | currency}}</ td >

         < td >

             < button ng-click = "remove($index)" >Remove</ button >

         </ td >

     </ tr >

</ table >

 

< script src = "../lib/angularjs/1.2.26/angular.min.js" ></ script >

< script >

     function CartController($scope) {

         $scope.items = [

             {name: "雷柏（Rapoo） V500 机械游戏键盘 机械黄轴", quantity: 1, price: 199.00},

             {name: "雷柏（Rapoo） V20 光学游戏鼠标 黑色烈焰版", quantity: 1, price: 139.00},

             {name: "AngularJS权威教程", quantity: 2, price: 84.20}

         ];

 

         $scope.remove = function (index) {

             $scope.items.splice(index, 1);

         }

     }

</ script >

</ body >

</ html >




总之，刚学习不久要更新的就慢慢更新， 每天有空就写写博文作文记事功能，能慢慢成长就好。不重文采，在于添加一些小差漏。