快捷導(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的用法，文章開始先進(jìn)行了簡(jiǎn)單的介紹，而后通過完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來一起看看吧。

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é)

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

您可能感興趣的文章: