angularJS- ng-repeat 指令用法小结

最新推荐文章于 2021-06-27 12:47:39 发布

原创最新推荐文章于 2021-06-27 12:47:39 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ng-repeat #angular

Angular JS 专栏收录该内容

9 篇文章

订阅专栏

本文总结了AngularJS中ng-repeat指令的使用方法，包括如何遍历数组、对象，以及使用过滤器、跟踪项标识等高级用法。通过实例展示了ng-repeat在视图渲染和动态列表更新中的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>

    <script>
        angular.module('repeatExample', [])
            .controller('exampleController', ['$scope', function ($scope) {
                $scope.friends = [
                    { name: 'John', age: 25, gender: 'boy' },
                    { name: 'Jessie', age: 30, gender: 'girl' },
                    { name: 'Johanna', age: 28, gender: 'girl' },
                    { name: 'Joy', age: 15, gender: 'girl' },
                    { name: 'Mary', age: 25, gender: 'girl' },
                    { name: 'Peter', age: 95, gender: 'boy_a' },
                    { name: 'Sebastian', age: 50, gender: 'boy' },
                    { name: 'Erika', age: 27, gender: 'girl' },
                    { name: 'Patrick', age: 40, gender: 'boy' },
                    { name: 'Samantha', age: 60, gender: 'girl' }
                ];
                $scope.personObj = { 'name': 'jamie', 'age': '33', 'gender': 'male' },
                    $scope.lt25 = function (e) {
                        return e.age > 25

                    }
            }]);
    </script>

</head>

<body ng-app="repeatExample">
    <div ng-controller="exampleController">
        <p>1.遍历数组</p>
        <ul>
            <li ng-repeat="friend in friends">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
        </ul>
        <p>2.遍历对象：</p>
        <div ng-repeat="(key,value) in personObj">
            key={{key}}
            value={{value}}
        </div>
        <p>或者</p>
        <div ng-repeat="(key,value) in personObj">
            key={{key}}
        </div>
        <p>或者</p>
        <ul>
            <li ng-repeat="(key,value) in personObj">{{key}}-{{value}}</li>
        </ul>
        <P>3.过滤器：</P>
        <P>所有属性值中包含25</P>
        <ul>
            <li ng-repeat="friend in friends|filter: 25">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
        </ul>
        <p>所有属性值中包含a</p>
        <ul>
            <li ng-repeat="friend in friends|filter: 'a'">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
        </ul>
        <p>name中包含a</p>
        <ul>
            <li ng-repeat="friend in friends|filter: {name:'a'}">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
        </ul>
        <p>或者</p>
        <ul>
            <li ng-repeat="friend in friends|filter: 'a' track by friend.name">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
        </ul>
        <P>age>25</P>
        <ul>
            <li ng-repeat="friend in friends|filter: lt25">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
        </ul>
        <p>name中包含a,age>25</p>
        <ul>
            <li ng-repeat="friend in friends|filter: {name:'a'}|filter: lt25">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
        </ul>

        <p>4.保存匹配结果：</p>

        <p>把匹配到的结果另存到results数组变量,可供外部使用</p>
        <ul>
            <li ng-repeat="friend in friends|filter: {name:'a'} as results">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
        </ul>
        <p>或者</p>
        <ul>
            <li ng-repeat="friend in friends|filter: 'a' as results2 track by friend.name">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
        </ul>
        <p>结果</p>
        <ul>
            <li ng-repeat="friend in results">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
        </ul>
    </div>

</body>

</html>