angular.js表格内容搜索过滤代码
2017-03-30 16:21
645 查看
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 = '';}}});
相关文章推荐
- 2. AngularJs+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- AngularJs+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性下拉框选择效果JS代码
- Angular.js与Bootstrap相结合实现表格分页代码
- JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
- JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
- JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
- js实现当鼠标移到表格上时显示这一格全部内容的代码
- AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
- 可以用来搜索当前页面内容的js代码
- Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
- JS访问表格内容,计时器等示例代码
- 可以用来搜索当前页面内容的js代码
- JS实现table表格内针对某列内容进行即时搜索筛选功能
- Angular.js与Bootstrap相结合实现表格分页代码
- 用js实现的一个根据内容自动生成表格的函数
- 用ASP将SQL搜索出来的内容导出为TXT的代码
- 一个用js实现的页内搜索代码
- 表单提交时自动复制内容到剪贴板的js代码
- js源码--表格内容的拖动