05-指令ng-repeat

最新推荐文章于 2024-01-28 05:15:00 发布

原创最新推荐文章于 2024-01-28 05:15:00 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

angularJS 专栏收录该内容

35 篇文章

订阅专栏

本文通过两个示例展示了如何在AngularJS中使用ng-repeat指令来遍历数组和数组中的对象。第一个示例演示了如何显示数组中的每个元素，第二个示例则展示了如何访问并展示数组对象中的属性。

<!DOCTYPE html>
<html lang="en" ng-app="">
    <head>
        <meta charset="utf-8">
        <script src="js/angular.js"></script>
    </head>
    <body>
        <div ng-init="name=['hello','dog','cat']">
            <p>使用ng-repeat来遍历数组</p>
            <ul>
                <li ng-repeat="x in name">
                    {{x}}
                </li>
            </ul>
        </div>


        <div ng-init="names=[
                {name:'zhangsan',age:20},
                {name:'sanzhang',age:21},
                {name:'dog',age:22}]">
            <p>使用ng-repeat来遍历数组对象</p>
            <ul>
                <li ng-repeat="person in names">
                    {{person.name}}>>>>>>>{{person.age}}
                </li>
            </ul>
        </div>
    </body>
</html>