Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

ng-repeat-start与ng-repeat-end时AngularJS(1.2.x)扩展的,使用这两个指令可以灵活控制遍历形式。

例如:

index.html

<div class="uk-panel" ng-controller="UserCtrl">
      <ul class="uk-list uk-list-striped">
        <li ng-repeat-start="user in users">
          {{user.name}}
        </li>
        <li ng-repeat-end>
          {{user.email}}
        </li>
      </ul>
    </div>

index.js

var myApp = angular.module('myApp', []);

myApp.controller('UserCtrl', ['$scope', function($scope){
    $scope.users = [
      {
        name:'张三',
        email:'zhangsan@gmail.com'
      },
      {
        name:'李四',
        email:'lisi@123.com'
      },
      {
        name:'王五',
        email:'wangwu@qq.com'
      }
    ];

}]);

运行结果:

完整的实例代码

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
  <meta charset="utf-8">
  <title>ng-repeat-start 与 ng-repeat-end的用法</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
</head>
<body>
  <h4>多行遍历的实现方式</h4>
  <ul ng-controller="PeopleController">
    <li ng-repeat-start="person in people">
      {{ person.name }}
    </li>
    <li>住在</li>
    <li>
      {{ person.city }}
    </li>
    <br ng-repeat-end>
  </ul>
  <script src="../angular.min.js"></script>
  <script>
    angular.module('app', [])
    .controller('PeopleController', ['$scope', function($scope) {
      $scope.people = [
        {name: '张三', city: '广东'},
        {name: '李四', city: '江西'},
        {name: '王五', city: '东北'}
      ]
    }])
  </script>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

时间: 2016-12-30

3个可以改善用户体验的AngularJS指令介绍

1.头像图片 为了在你的应用中展示头像图片,你需要使用用户的电子邮件地址,将地址转换为小写并使用md5加密该字符串.所以聪明的做法是使用指令来做到这些,并且可以复用. /* * A simple Gravatar Directive * @example * <gravatar-image email="test@email.com" size="50"></gravatar-image> */ app.directive('gravatar

关于angularJs指令的Scope(作用域)介绍

每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. 1.scope = false JS 代码: html 代码: result: 修改文本框的内容,两个名字都会变,实际上修改的是同一个$scope的name属性. 2. scope=true

AngularJS HTML编译器介绍

概览 AngularJS的HTML编译器能让浏览器识别新的HTML语法.它能让你将行为关联到HTML元素或者属性上,甚至能让你创造具有自定义行为的新元素.AngularJS称这种行为扩展为"指令" HTML在编写静态页面时,有很多声明式的结构来控制格式.比如你要把某个内容居中,你不必告诉浏览器"去找到窗口的中点位置,然后跟内容的中间结合".你只需要添加一个 align="center" 的属性给需要内容居中的元素就行了.这就是声明式语言的强大之处

AngularJS 执行流程详细介绍

一.启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点.我们可以把AngularJS当做一个类似jQuery的js库,我们通过<script>标签引入到HTML中,那么此时Angular就做为一个普通的DOM节点等待浏览器解析,当浏览器解析到这个节点时,发现它是一个js文件,那么浏览器会停止解析剩余的DOM节点,开始执行这个js(即angular.js),同时Angular会设置一个事件监听器来监听浏览器的DOM

AngularJS 模型详细介绍及实例代码

AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. ng-model 指令 ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="

AngularJs每天学习之总体介绍

这周末在家呆了两天,正好中午闲暇时间继续分享Angularjs相关,今天主要分享Angularjs总体介绍及数据绑定部分内容,下面直接进入主题. 1.基本概念: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的伪静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事,通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足. 2.版本 angualrjs1.x:目前比较稳定版

AngularJS中的包含详细介绍及实现示例

AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 在 HTML 中包含 HTML 文件 在 HTML 中,目前还不支持包含 HTML 文件的功能. 服务端包含 大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes). 使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器. PHP 实例 <?php require("navigation.php"); ?> 客户端包

AngularJS中的Promise详细介绍及实例代码

Angular中的Promise 在用jQuery的时候就知道 promise 是 Js异步编程模式的一种模式,但是不是很明白他跟JQuery的deferred对象有什么区别.随着公司项目的进行,要跟后台接数据了,所以决定搞定它. Promise Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件. 我们知道,在编写JavaScript异步代码时,callback是最最简单的机制,可是用这种机制的话必须牺牲控制流.异常处理和函数语义化为代价,甚至会

AngularJS基础学习笔记之简单介绍

AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HTML元素中. AngularJS是一个JavaScript框架 AngularJS是一个JavaScript框架,它是由JavaScript语言编写的类库. AngularJS以JavaScript文件的形式进行发布,我们可以通过script标记将它添加到web页面中: 复制代码 代码如下: <scri

AngularJS Bootstrap详细介绍及实例代码

AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. 查看 Bootstrap教程. Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.

AngularJS 表达式详细讲解及实例代码

AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式写在双大括号内: {{ expression }} . AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. AngularJS 将在表达式书写的位置"输出"数据. AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字.运算符和变量. 实例 {{ 5 + 5 }} 或 {{ firstName + &quo

Java Filter 过滤器详细介绍及实例代码

Filter简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截,从而实现一些特殊的功能.例如实现URL级别的权限访问控制.过滤敏感词汇.压缩响应信息等一些高级功能. 它主要用于对用户请求进行预处理,也可以对HttpServletResponse 进行后处理.使用Filter 的完整流程:Filter 对用户请求进行预处理,接着将

java 线程同步详细介绍及实例代码

java 线程同步 概要: 为了加快代码的运行速度,我们采用了多线程的方法.并行的执行确实让代码变得更加高效,但随之而来的问题是,有很多个线程在程序中同时运行,如果它们同时的去修改一个对象,很可能会造成讹误的情况,这个时候我们需要用一种同步的机制来管理这些线程. (一)竞争条件 记得操作系统中,让我印象很深的有一张图.上面画的是一块块进程,在这些进程里面分了几个线程,所有这些线程齐刷刷统一的指向进程的资源.Java中也是如此,资源会在线程间共享而不是每个线程都有一份独立的资源.在这种共享的情况下

Java enum的用法详细介绍及实例代码

Java enum的用法 用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl.... .现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法. public enum Color { RED, GREEN, BLANK, YELLOW } 用法二:switch JDK1.6之前的switch语句只支持int,char,enum类型,使用枚举,能让我们的代码可读性更强. enum Signal { GREEN, YEL

Java 线程的生命周期详细介绍及实例代码

当线程被创建并启动之后,它既不是一启动就进入执行状态,也不是一直处于执行状态,在其生命周期中,要经过"新建(New)"."就绪(Runnable)"."运行(Running')"."阻塞(Blocked)"和"死亡(Dead)"五种状态.线程在创建之后,不可能一直霸占着CPU独立运行,需要在多个线程之间切换,所以大部分时间处于运行.阻塞之间切换.  一.线程的状态 线程的存在有几种不同的状态,如下: New

ASP Cookies操作的详细介绍与实例代码

Cookie是一种发送到客户浏览器的文本串句柄,并保存在客户机硬盘上,可以用来在某个Web站点会话之间持久地保持数据.Request和Response对象都有一组Cookie.Request.cookie集合是一系列Cookie,从客户端与HTTP Request一起发送到Web服务器.反过来,如果你希望把Cookie发送到客户机,就可以使用Response.cookie 1.ExpiresAbsolute属性 该属性可以赋一个日期,过了这个日期Cookie就不能再被使用了.通过给Expires

java 线程锁详细介绍及实例代码

java 线程锁 在Java线程中运用synchronized关键字来达到同步的 synchronized可以锁方法,锁类,锁对象,锁代码块 方法锁 // 加在方法上面的同步锁是this public synchronized void print() { System.out.println("同步方法"); try { Thread.sleep(3000); } catch (InterruptedException e) { e.printStackTrace(); } } 类锁