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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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 array_map()数组函数使用说明
2011/07/12 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
python使用pandas实现数据分割实例代码
2018/01/25 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
零件设计自荐信范文
2013/11/27 职场文书
单位成立周年感言
2014/01/26 职场文书
黄金酒广告词
2014/03/21 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
2015年助残日活动总结
2015/03/27 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书