脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angularjs中ng-repeat-start与ng-repeat-end用法

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

 更新时间：2016年12月31日 09:32:53   投稿：daisy  
这篇文章主要给大家介绍了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>

总结

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

您可能感兴趣的文章:

相关文章

  • Angular开发者指南之入门介绍

    Angular开发者指南之入门介绍

    本篇文章主要介绍了Angular开发者指南的入门知识，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 详解Angularjs filter过滤器

    详解Angularjs filter过滤器

    这篇文章主要介绍了angularjs filter过滤器的相关资料,需要的朋友可以参考下
    2016-02-02
  • angular内容投影详解

    angular内容投影详解

    这篇文章主要为大家介绍了angular内容投影，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • Angular-UI Bootstrap组件实现警报功能

    Angular-UI Bootstrap组件实现警报功能

    这篇文章主要介绍了Angular-UI Bootstrap组件实现警报功能,对Angular.js services的学习有所帮助，需要的朋友可以参考下
    2018-07-07
  • 详解AngularJS ng-class样式切换

    详解AngularJS ng-class样式切换

    本篇文章主要介绍了详解AngularJS ng-class样式切换，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AngularJS封装指令方法详解

    AngularJS封装指令方法详解

    这篇文章主要介绍了AngularJS封装指令方法,结合实例形式详细分析了AngularJS的功能、jQuery类库协作及组件封装的具体操作技巧,需要的朋友可以参考下
    2016-12-12
  • 详解Angular父子组件通讯

    详解Angular父子组件通讯

    本文介绍了Angular父子组件是如何通讯的，对此感兴趣的同学，可以参考下，并且亲自实验一下。
    2021-05-05
  • 详解angular中的作用域及继承

    详解angular中的作用域及继承

    本篇文章主要介绍了详解angular中的作用域及继承，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • angularjs指令之绑定策略（@、=、&）

    angularjs指令之绑定策略（@、=、&）

    这篇文章主要介绍了angularjs指令之绑定策略（@、=、&）,AngularJS提供了几种方法能够将指令内部的隔离作用域，同指令外部的作用域进行数据绑定。
    2017-04-04
  • 详解Angular数据绑定及其实现方式

    详解Angular数据绑定及其实现方式

    数据绑定是将应用程序UI或用户界面绑定到模型的机制。使用数据绑定，用户将能够使用浏览器来操纵网站上存在的元素。
    2021-05-05

最新评论