小程序有哪些商机_angular过滤器完成排序功用

2021-01-11 16:45

angular过滤器实现排序功能       这篇文章主要为大家详细介绍了angular过滤器实现排序功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

首先定义一个json文件:

 

然后写HTML文件:

 div id="box" 
 !--第一个下拉框-- 
 select ng-model="a" 
 option value="age" 按照年龄排序 /option 
 option value="code" 按照编码排序 /option 
 option value="name" 按照姓名排序 /option 
 /select 
 !--升序还是降序-- 
 select ng-model="b" 
 option value="" 升序 /option 
 option value="-" 降序 /option 
 /select 
 !--一个搜索框-- 
 input type="text" placeholder="请输入要搜索的内容" ng-model="c"/ 
 /div 
 !--渲染的数据-- 
 div id="wrap" 
 table 
 th 编码 /th 
 th 姓名 /th 
 th 年龄 /th 
 /tr 
 tr ng-repeat="item in data|filter:c|orderBy:b+a" 
 td {{item.code}} /td 
 td {{item.name}} /td 
 td {{item.age}} /td 
 /tr 
 /table 
 /div 

angular:

 script 
 var app = angular.module("mk",[]);
 app.controller("test",function($scope,$http){
 $http.get('json/index.json').success(function(data){
 $scope.data = eval(data);
 $scope.a = "code";
 /script 

在这种运用到的过滤器有filter 、orderBy

这样就完成了一个简单的排序,希望能帮到大家!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



扫描二维码分享到微信

在线咨询
联系电话

020-66889888