快捷導(dǎo)航

Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹

更新時(shí)間：2016年12月31日 09:32:53 投稿：daisy

這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開(kāi)始先進(jìn)行了簡(jiǎn)單的介紹，而后通過(guò)完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。

ng-repeat-start與ng-repeat-end時(shí)AngularJS（1.2.x）擴(kuò)展的，使用這兩個(gè)指令可以靈活控制遍歷形式。

例如：

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

運(yùn)行結(jié)果：

完整的實(shí)例代碼

<!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>多行遍歷的實(shí)現(xiàn)方式</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>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章:

相關(guān)文章

利用VS Code開(kāi)發(fā)你的第一個(gè)AngularJS 2應(yīng)用程序
這篇文章主要給大家介紹了關(guān)于利用VS Code如何開(kāi)發(fā)你的第一個(gè)AngularJS 2應(yīng)用程序的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友下面來(lái)一起看看吧。
2017-12-12
angular4自定義組件詳解
這篇文章主要為大家詳細(xì)介紹了angular4自定義組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
AngularJS 作用域詳解及示例代碼
本文主要介紹AngularJS 作用域的知識(shí)，這里整理了基礎(chǔ)資料，和示例代碼以及實(shí)現(xiàn)效果圖，有需要的小伙伴可以參考下
2016-08-08
詳解angular 中的自定義指令之詳解API
本篇文章主要介紹了angular 中的自定義指令之詳解API，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
Angular2 路由問(wèn)題修復(fù)詳解
這篇文章主要介紹了Angular2 路由問(wèn)題修復(fù)詳解的相關(guān)資料,并建了一個(gè)測(cè)試工程，把詳細(xì)的過(guò)程分享給大家，需要的朋友可以參考下
2017-03-03
Angular2學(xué)習(xí)教程之ng中變更檢測(cè)問(wèn)題詳解
這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之ng中變更檢測(cè)問(wèn)題的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-05-05
詳解Angular之路由基礎(chǔ)
單頁(yè)應(yīng)用中，組件時(shí)構(gòu)建應(yīng)用的基礎(chǔ)元素，頁(yè)面展示什么內(nèi)容均是靠頁(yè)面有什么組件決定的，而展示什么組件又是由一組路由（帶有Url元素的特定集合，可用于導(dǎo)航視圖）決定的，希望本文可以幫助讀者了解路由的基礎(chǔ)概念和基礎(chǔ)使用、寫(xiě)法。
2021-05-05
如何用DevUI搭建自己的Angular組件庫(kù)
DevUI 是一款面向企業(yè)中后臺(tái)產(chǎn)品的開(kāi)源前端解決方案，它倡導(dǎo)沉浸、靈活、至簡(jiǎn)的設(shè)計(jì)價(jià)值觀，提倡設(shè)計(jì)者為真實(shí)的需求服務(wù)，為多數(shù)人的設(shè)計(jì)，拒絕嘩眾取寵、取悅眼球的設(shè)計(jì)。如果你正在開(kāi)發(fā) ToB 的工具類產(chǎn)品，DevUI 將是一個(gè)很不錯(cuò)的選擇！
2021-05-05
Angular 利用路由跳轉(zhuǎn)到指定頁(yè)面的指定位置方法
今天小編就為大家分享一篇Angular 利用路由跳轉(zhuǎn)到指定頁(yè)面的指定位置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
AngularJs Forms詳解及簡(jiǎn)單示例
本文主要介紹AngularJs Forms，這里整理了相關(guān)資料及簡(jiǎn)單示例代碼，有需要的朋友可以參考下
2016-09-09