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