AngularJS ng-repeat的使用

发布时间：2020-12-17 09:59:07 所属栏目：安全来源：网络整理

导读：特有属性： $index,$first,$last !DOCTYPE html html lang= "en" head meta charset= "UTF-8" title AngularJS / title link rel= "stylesheet" href= "css/foundation.min.css" style type= "text/css" . tx { width : 50 px ; height : 50 px ; margin-bot

特有属性：

$index,$first,$last

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>

    <link rel="stylesheet" href="css/foundation.min.css">
    <style type="text/css">
        .tx {
            width: 50px;
            height: 50px;
            margin-bottom: 10px;
            magin-left: 80px;
        }
    </style>
</head>
<body ng-app="app" ng-controller="AddressCtrl">
    <div style="padding:10px; font-weight:bold" >地址管理</div>
    <ul class="ui-list ui-list-link ui-list-text ui-list-active ui-border-tb">
        <li ng-repeat="item in list" class="ui-border-t">
            <h4>{{$index+1+'.'+item.address + $first +' '+ $last}}</h4>
        </li>
    </ul>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

angular.module('app',[])
.controller('AddressCtrl',function ($scope) {
    $scope.list = [
        {id:1,address:'1村'},{id:2,address:'2村'},{id:3,address:'3村'},{id:4,address:'4村'}
    ];
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!