angularJS- ng-repeat 指令用法小结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/stu_20052369/article/details/87072589
<!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>

猜你喜欢

转载自blog.csdn.net/stu_20052369/article/details/87072589