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


Posted in Javascript onDecember 31, 2016

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'
      }
    ];
    
    
}]);

运行结果:

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

完整的实例代码

<!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>

总结

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

Javascript 相关文章推荐
jQuery之日期选择器的深入解析
Jun 19 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 #Javascript
Javascript 实现全屏滚动实例代码
Dec 31 #Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 #Javascript
javascript 闭包详解及简单实例应用
Dec 31 #Javascript
深入理解Angularjs中的$resource服务
Dec 31 #Javascript
BootStrap Fileinput的使用教程
Dec 30 #Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 #Javascript
You might like
PHP APC的安装与使用详解
2013/06/13 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
php实现简单的上传进度条
2015/11/17 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
理解javascript对象继承
2016/04/17 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
python中查看变量内存地址的方法
2015/05/05 Python
python学生管理系统代码实现
2020/04/05 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
python线性插值解析
2020/07/05 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
Python调用飞书发送消息的示例
2020/11/10 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
大学生新闻专业个人自我评价
2013/11/12 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
机电系毕业生求职信
2014/07/11 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
学校团代会开幕词
2016/03/04 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
python运行脚本文件的三种方法实例
2022/06/25 Python