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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,661评论 0 3
  • 基础ng属性指令 布尔属性 布尔属性代表一个true或false值。当这个属性出现时,这个属性的值就是true(无...
    oWSQo阅读 1,253评论 0 0
  • 概述 ng-class指令实现了把元素的class属性和数据模型绑定的功能。在进行样式动态控制时非常的有用。ng-...
    yb_剑笙阅读 785评论 0 0
  • AngularJS AngularJS概述 介绍 简称:ng Angular是一个MVC框架 其他前端框架: Vu...
    我爱开发阅读 2,349评论 0 8
  • 基础ng属性指令 ng-hrefng-srcng-disabledng-checkedng-readonlyng-...
    JUN_API阅读 521评论 0 0