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

时间：2014-06-19 07:29:29 阅读：289 评论：0 收藏：0 [点我收藏+]

<!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>