您的位置：首页 > Web前端 > JavaScript

angular.js表格内容搜索过滤代码

2017-03-30 16:21 585 查看

angular.js表格内容搜索过滤代码

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"><script type="text/javascript" src="angular.min.js" ></script><script type="text/javascript" src="index.js"></script><body ng-app="myApp" ng-controller="productController"><div class="container"><form class="navbar-form pull-left"><input type="text" class="span2" placeholder="Search" ng-model="search.id"></form><table class="table"><thead><tr><!--dropup：true 这个class就显示，即升序，否则不显示！--><!--注意，这里是ng-class，还有droupup:order中间是没有任何空格的！！！！--><th ng-class="{dropup:order ===''}" ng-click="changeOrder('id')"> 产品编号<span class="caret"></span> </th><th ng-class="{dropup:order ===''}" ng-click="changeOrder('name')"> 产品名称<span class="caret"></span> </th><th ng-class="{dropup:order === ''}" ng-click="changeOrder('price')"> 产品价格<span class="caret"></span> </th></tr></thead><tbody><!--<tr ng-repeat="product in products | filter:{id:search}">--><!--order+orderType注意这两个字段是有顺序的 不能反着写--><tr ng-repeat="product in products | filter:search | orderBy : order+orderType"><td> {{product.id}} </td><td> {{product.name}} </td><td> {{product.price | currency : "(RMB)"}} </td></tr></tbody></table></div>index.jsvar app = angular.module("myApp", []);app.service("products",function() {return [{id: 1,name: "iphone",price: 5000},{id: 2,name: "iphone 4",price: 1993},{id: 3,name: "iphone 5",price: 2893},{id: 4,name: "iphone 6",price: 4500}];});app.controller("productController",function($scope, products) {$scope.products = products; //Angular自动注入//排序条件$scope.order = "-"; //默认是升序,-表示降序$scope.orderType = "id"; //以id来排序,不能直接在页面以id这个字段排序$scope.changeOrder = function(type) {$scope.orderType = type;//如果本来是降序，就变为升序，如果是升序，就变为降序if ($scope.order === '') {$scope.order = '-';} else {$scope.order = '';}}});

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航