ng-repeat 指令:

ng-repeat 指令用来遍历一个数组重复创建当前元素;

<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in userNames track by $index">{{$index}}:{{item}}</li>
</ul>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('myAppController',['$scope',function($scope){
$scope.userNames = {
"id":1,
"name":"小三",
"age":"20"
};
}]);
</script>

案例二:

<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in datashuju track by $index" data-id="{{item.id}}">{{$index}}:{{item.name}}的年龄是{{item.age}}</li>
</ul>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('myAppController',['$scope',function($scope){
$scope.datashuju = [];
for(var i=0; i<10; ++i){
//常见写法,不写 i
$scope.datashuju[$scope.datashuju.length] = {
id:i,
name:'赵小黑'+i,
age:20+i
};
};
}]);
</script>

在这个例子中,Models中有:

$id:10

item:Objet

$index:1

$first:false

$last:false

$middle:true

$even:false

$odd:true

例如:$first 和 $last的简单使用:

<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in datashuju track by $index" data-id="{{item.id}}">{{$first?'开始':''}}{{$index}}:{{item.name}}的年龄是{{item.age}}{{$last?'结束':''}}</li>
</ul>

ng-repeat结合ng-class实现各行换色

ng-class:会根据当前设置对象的属性和属性值决定是否添加特定的类名:

<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in datashuju track by $index" ng-class="{red:true}" data-id="{{item.id}}">{{$first?'开始':''}}{{$index}}:{{item.name}}的年龄是{{item.age}}{{$last?'结束':''}}</li>
</ul>

实现各行换色:(注意这里用到的是一个大括号)

<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in datashuju track by $index" ng-class="{red:$even,green:$odd}" data-id="{{item.id}}">{{$first?'开始':''}}{{$index}}:{{item.name}}的年龄是{{item.age}}{{$last?'结束':''}}</li>
</ul>

ng-class拓展:结合双向数据绑定,实现选择颜色替换背景:

<style type="text/css">
.red{background:red}
.orange{background: orange;}
.yellow{background: yellow;}
#box{width: 200px; height: 200px;}
</style>
<div ng-app>
<select ng-model='color'>
<option value="red">red</option>
<option value="orange">orange</option>
<option value="yellow">yellow</option>
</select>
<div id="box" ng-class="color"></div>
</div>

ng-repeat 解决重复项,使用 trak by $index

结合 startsWith()做一个筛选:

<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in datashuju track by $index" ng-class="{red:item.startsWith('张')}">{{item}}</li>
</ul>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('myAppController',['$scope',function($scope){
$scope.datashuju = ['刘备','关羽','张飞','关兴','张三'];
}]);
</script>

结合双向数据绑定使用:

<ul ng-app="myApp" ng-controller="myAppController">
<input type="text" ng-model="fistName">
<li ng-repeat="item in datashuju track by $index" ng-class="{red:item.startsWith(fistName)}">{{item}}</li>
</ul>

angularJS中的ng-repeat指令!的更多相关文章

  1. AngularJs中的directives(指令part1)

    一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...

  2. angularJS中如何写自定义指令

    指令定义 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能 例如,ng-click可以让一个元素能够监听click事件,并在接收到事件的时候执行angularJS ...

  3. AngularJS中的指令

    欢迎大家讨论与指导 : )  前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...

  4. 彻底弄懂AngularJS中的transclusion

    点击查看AngularJS系列目录 彻底弄懂AngularJS中的transclusion AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个 ...

  5. Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy

    ng-app   定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...

  6. AngularJS中Directive指令系列 - 基本用法

    参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...

  7. AngularJS中的指令全面解析(转载)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  8. Angularjs 中使用指令绑定点击事件

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...

  9. 浅谈AngularJS中的指令和指令间的相互通信

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  10. angularJS中的ng-show、ng-if指令

    angularJS中的ng-show.ng-hide.ng-if指令都可以用来控制dom元素的显示或隐藏. 1. ng-show和ng-hide 根据所给表达式的值来显示或隐藏HTML元素.元素会渲染 ...

随机推荐

  1. 常用的经典jquery代码[转]

    0. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“s ...

  2. selenium测试(Java)--关闭窗口(二十)

    quit方法:退出相关的驱动程序和关闭所有窗口 close方法:关闭当前窗口 package com.test.closewindow; import java.util.Iterator; impo ...

  3. page指令属性简要介绍:

    page指令属性简要介绍: language=”java” 声明脚本语言的种类,暂时只能用”java” extends=”package.class” 标明JSP编译时需要加入的Java Class的 ...

  4. 将ORACLE数据库更改为归档模式;写出步骤

    解答:具体步骤如下: 1),以exp方式在线备份数据库到指定位置: 2),观察当前数据库是以服务器参数文件(spfile)方式启动还是以参数文件(pfile)方式启动: SQL> show pa ...

  5. Ajax分页(MVC下)(附源码,前后台)

    网上找的一个分页js,自己改了改.. 前台页面 @{ ViewBag.Title = "Index"; } <h1>分页方法封装</h1> <scri ...

  6. 【转载】Redhat5和6 YUM源配置的区别

    Redhat5和6 YUM源配置的区别  一.概述    随着各个软件版本的不断升级,我们需要掌握的软件特性也越来越多,技术的不断更新也促进了我们脑细胞的循环. 今天在配置RedHat6.3的yum源 ...

  7. 如何使用ChemDraw绘制自由基符号

    ChemDraw软件是一款全球领先的化学绘图工具,能够绘制各种复杂的化学符号和化学结构图形.ChemDraw汉化版结合了中国用户的使用习惯,可以帮助国内化学行业工作者更加轻松快捷地绘制化学图形.本教程 ...

  8. Windows中目录及文件路径太长无法删除的解决方法

    用windows自带的命令解决  win7以上的系统有 robocopy 命令 http://www.jianshu.com/p/95a269951a1b 导致目录太深的原因就是用node中的node ...

  9. elastic-job(lite)使用的一些注意事项

    前段时间项目开发中用到了当当开源的elastic-job,使用过程遇到一些问题,虽然不见得会影响写代码,但作为一个致力于搬好每一块砖的码农,当碰到问题时,我们不应该逃避,应该本着有困难也要上,没有困难 ...

  10. centos无法联网解决方法

    1)进入 /etc/sysconfig/network-scripts/ 2)vi 或 vim 打开 ifcfg-eth0(不一定是eth0,这个自己判断了) 3)将 ONBOOT=no 改成 ONB ...