Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

时间：2021-05-28

ng-repeat-start与ng-repeat-end时AngularJS（1.2.x）扩展的，使用这两个指令可以灵活控制遍历形式。

例如：

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

运行结果：

完整的实例代码

<!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>多行遍历的实现方式</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>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章