ng-repeat

最新推荐文章于 2019-02-12 12:49:44 发布

原创最新推荐文章于 2019-02-12 12:49:44 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

流行框架node 专栏收录该内容

24 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用 AngularJS 中的 ng-repeat 指令来遍历数组并展示数据。示例中创建了一个包含十个元素的数组，并使用 ng-repeat 将数组中的每个元素显示为列表项。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title>ng-repeat</title>
    </head>
    <body>
    <!-- ng-repeat会遍历数组中每一个元素，分别创建li  -->
        <ul ng-controller="listenController">
            <li data-id="{{item.id}}" ng-repeat="item in data">
                <span>{{$first?'开始':''}}</span>
                <strong>{{item.name}}</strong>
                <span>{{item.age}}</span>
                <span>{{$last?'没有了':''}}</span>
            </li>
        </ul>

        <script src="bower_components/angular/angular.js"></script>
        <script>
            angular.module('myApp', [])
                .controller('listenController', ['$scope', function($scope){
                    $scope.data = [];
                    for(var i=1;i<10;i++){
                        $scope.data[$scope.data.length] = {
                            id: i,
                            name:'赵小黑的小'+i,
                            age:20+i
                        };
                    }

                }]);
        </script>
    </body>
</html>