angular 模板內容渲染

重復

$index 當前索引
$first 是否為頭元素
$middle 是否為非頭非尾元素
$last 是否為尾元素

例子一:

<div ng-controller="TestCtrl">
  <ul ng-repeat="member in obj_list">
    <li>{{ member }}</li>
  </ul>
</div>
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
    $scope.obj_list = [1,2,3,4];
});
angular.bootstrap(document.documentElement, ['app']);

例子二:

<div ng-controller="TestCtrl">
  <ul ng-repeat="member in obj_list">
    <li>{{ $index }}, {{ member.name }}</li>
  </ul>
</div>
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
    $scope.obj_list = [{name: 'A'}, {name: 'B'}, {name: 'C'}];
});
angular.bootstrap(document.documentElement, ['app']);

奇偶

ng-class-even 和 ng-class-odd 是和 ng-repeat 配合使用的:

<ul ng-init="l=[1,2,3,4]">
  <li ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="m in l">{{ m }}</li>
</ul>

賦值

<div ng-controller="TestCtrl" ng-init="a=[1,2,3,4];">
  <ul ng-repeat="member in a">
    <li>{{ member }}</li>
  </ul>
</div>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • AngularJS是什么?AngularJs(后面就簡稱ng了)是一個用于設計動態(tài)web應用的結構框架。首先,它是...
    200813閱讀 1,761評論 0 3
  • 基礎ng屬性指令 布爾屬性 布爾屬性代表一個true或false值。當這個屬性出現時,這個屬性的值就是true(無...
    oWSQo閱讀 1,346評論 0 0
  • 概述 ng-class指令實現了把元素的class屬性和數據模型綁定的功能。在進行樣式動態(tài)控制時非常的有用。ng-...
    yb_劍笙閱讀 846評論 0 0
  • AngularJS AngularJS概述 介紹 簡稱:ng Angular是一個MVC框架 其他前端框架: Vu...
    我愛開發(fā)閱讀 2,403評論 0 8
  • 基礎ng屬性指令 ng-hrefng-srcng-disabledng-checkedng-readonlyng-...
    JUN_API閱讀 582評論 0 0

友情鏈接更多精彩內容