快捷導(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)文章

Angular開(kāi)發(fā)者指南之入門(mén)介紹
本篇文章主要介紹了Angular開(kāi)發(fā)者指南的入門(mén)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
詳解Angularjs filter過(guò)濾器
這篇文章主要介紹了angularjs filter過(guò)濾器的相關(guān)資料,需要的朋友可以參考下
2016-02-02
angular內(nèi)容投影詳解
這篇文章主要為大家介紹了angular內(nèi)容投影，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
Angular-UI Bootstrap組件實(shí)現(xiàn)警報(bào)功能
這篇文章主要介紹了Angular-UI Bootstrap組件實(shí)現(xiàn)警報(bào)功能,對(duì)Angular.js services的學(xué)習(xí)有所幫助，需要的朋友可以參考下
2018-07-07
詳解AngularJS ng-class樣式切換
本篇文章主要介紹了詳解AngularJS ng-class樣式切換，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
AngularJS封裝指令方法詳解
這篇文章主要介紹了AngularJS封裝指令方法,結(jié)合實(shí)例形式詳細(xì)分析了AngularJS的功能、jQuery類(lèi)庫(kù)協(xié)作及組件封裝的具體操作技巧,需要的朋友可以參考下
2016-12-12
詳解Angular父子組件通訊
本文介紹了Angular父子組件是如何通訊的，對(duì)此感興趣的同學(xué)，可以參考下，并且親自實(shí)驗(yàn)一下。
2021-05-05
詳解angular中的作用域及繼承
本篇文章主要介紹了詳解angular中的作用域及繼承，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
angularjs指令之綁定策略（@、=、&）
這篇文章主要介紹了angularjs指令之綁定策略（@、=、&）,AngularJS提供了幾種方法能夠?qū)⒅噶顑?nèi)部的隔離作用域，同指令外部的作用域進(jìn)行數(shù)據(jù)綁定。
2017-04-04
詳解Angular數(shù)據(jù)綁定及其實(shí)現(xiàn)方式
數(shù)據(jù)綁定是將應(yīng)用程序UI或用戶(hù)界面綁定到模型的機(jī)制。使用數(shù)據(jù)綁定，用戶(hù)將能夠使用瀏覽器來(lái)操縱網(wǎng)站上存在的元素。
2021-05-05