首页 > 代码库 > AngularJS-ng-model+ng-repeat实现搜索框

AngularJS-ng-model+ng-repeat实现搜索框

2024-07-08 16:05:36   226人阅读

<!DOCTYPE html><html ng-app="myapp">    <head>        <meta charset="utf-8" />        <title></title>        <script type="text/javascript" src="js/angular.min.js" ></script>        <script>            var app = angular.module(‘myapp‘, []);            app.factory(‘averages‘, function(){                var avgs = {};                                avgs.count = [                    {                        name : ‘zhangsan‘,                        age : 35                    },                    {                        name : ‘lisi‘,                        age : 25                    },                    {                        name : ‘wangwu‘,                        age : 18                    }                ];                                return avgs;            });                        function avgCtrl($scope, averages){                $scope.avgs = averages;            }        </script>    </head>    <body>        <div ng-controller="avgCtrl">            <input type="text" ng-model="search.name" />            <ul>                <li ng-repeat="count in avgs.count | filter:search >                    <h1>{{count.name }}</h1><h2>{{count.age}}</h2>                </li>            </ul>        </div>    </body></html>

ng-repeat可以理解为forin，当然ng-repeat要比我们所理解的forin强大的多

ng-repeat能结合过滤器实现更加功能

 

过滤列表：filter:search  查找匹配search的数据（如果为字符串则忽略大小写）

排序：orderBy:‘age ‘  按年龄升序排序，orderBy:‘-age ‘  按年龄降序排序

列表截取：limitTo:2 按正序显示2条数据 limitTo:-2 按逆序显示2条数据

其他过滤器：

时间戳格式化：date 例子{{ timestamp(时间戳) | date: ‘yyyy-MM-dd  HH:mm:ss’}}

大小写：lowercase ,uppercase 例子：{{ ‘abc’ | uppercase }}


联系
我们