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