angular.js表格内容搜索过滤示例代码
程序员文章站
2022-04-15 12:57:09
...
本文我们主要和大家分享angular.js表格内容搜索过滤示例代码,希望能帮助到大家。
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"> <p 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> </p> index.js var 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 = ''; } } });
相关推荐;
以上就是angular.js表格内容搜索过滤示例代码的详细内容,更多请关注其它相关文章!
上一篇: PHP聊天室技术