Angularjs 过滤器排序功能实例

网友投稿 316 2024-06-10

Angularjs 过滤器排序功能实例

本文主要和大家详细介绍了angularjs使用过滤器完成排序功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" src="js/angularjs.js" ></script>

<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />

<script>

angular.module(&#39;myApp&#39;,[])

.service(&#39;data&#39;,function(){

return [

{id:1234,name:&#39;ipad&#39;,price:3400},

{id:1244,name:&#39;aphone&#39;,price:6400},

{id:1334,name:&#39;mypad&#39;,price:4400},

{id:8234,name:&#39;zpad&#39;,price:8400}

];

})

.controller(&#39;myController&#39;,function($scope,data){

$scope.data=data;

$scope.change=function(order){

//$scope.orderType=&#39;&#39;;

$scope.order=order;

if($scope.orderType==&#39;&#39;){

$scope.orderType=&#39;-&#39;;

}else{

$scope.orderType=&#39;&#39;;

}

}

})

</script>

<style>

.red{color: red;}

</style>

</head>

<body ng-app="myApp">

<p ng-controller="myController" class="container">

<nav class="navbar navbar-default">

<p class="container-fluid">

<p class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<form class="navbar-form navbar-left">

<p class="form-group">

<input type="text" class="form-control" ng-model="search" placeholder="Search">

</p>

</form>

</p><!-- /.navbar-collapse -->

</p><!-- /.container-fluid -->

</nav>

<table class="table table-bordered table-hover">

<thead>

<tr>

<th ng-click="change(&#39;id&#39;)" ng-class="{dropup:orderType==&#39;&#39;}">id<span ng-class="{red:order==&#39;id&#39;}" class="caret"></span></th>

<th ng-click="change(&#39;name&#39;)" ng-class="{dropup:orderType==&#39;&#39;}">name<span ng-class="{red:order==&#39;name&#39;}" class="caret"></span></th>

<th ng-click="change(&#39;price&#39;)" ng-class="{dropup:orderType==&#39;&#39;}">price<span ng-class="{red:order==&#39;price&#39;}" class="caret"></span></th>

</tr>

</thead>

<tbody>

<tr ng-repeat="x in data | filter:search | orderBy:orderType+order ">

<td>{{x.id}}</td>

<td>{{x.name}}</td>

<td>{{x.price}}</td>

</tr>

</tbody>

</table>

</p>

</body>

</html>

相关推荐：

详解Angularjs过滤器实现动态搜索与排序功能

AngularJS过滤器filter用法实例分析

详解AngularJS过滤器的使用_AngularJS

以上就是Angularjs过滤器完成排序功能实例详解的详细内容

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：排序 js 实例 用法 java
上一篇:ajax 实现微信网页授权登录介绍
下一篇:微信小程序自动跳出的解决
相关文章

 发表评论

暂时没有评论，来抢沙发吧~