这篇文章主要为大家展示了“Angular排序的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Angular排序的示例分析”这篇文章吧。
创新互联是一家专注于成都网站建设、成都做网站与策划设计,金乡网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:金乡等地区。金乡做网站价格咨询:18980820575
angular的排序
<!DOCTYPE html> <html ng-app="mk"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } nav{ text-align: center; } nav>*{ vertical-align: top; } table{ width: 100%; text-align: center; } table th,td{ background: #A9A9A9; line-height: 30px; } </style> </head> <body> <div ng-controller="text"> <nav> <select ng-model="a"> <!-- 这也是表单也有数据,她可以获取value值,这几个值代表你循环进来的每项key名 --> <option value="num">按编号排序</option> <option value="name">按姓名排序</option> <option value="age">按年龄排序</option> </select> <select ng-model="b"> <!-- 也同样获取value值,当为负的时候,是倒序,正序 --> <option value="">升序</option> <option value="-">降序</option> </select> <input type="text" ng-model="s"/> </nav> <table border="0px" id="table"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> <tr ng-repeat="value in data | orderBy:b+a | filter:s"> <!-- 过滤器过滤以下数据 b+a这样就字符串拼接到了一起。这样数据改变就进行了排序 --> <td>{{value.num}}</td> <td>{{value.name}}</td> <td>{{value.age}}</td> </tr> </table> </div> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var app=angular.module("mk",[]); app.controller("text",function($scope,$http){ $http.get("paixu.json").success(function(data){ $scope.data=data.xinxi $scope.a="num"; }) }); </script> </body> </html>
以上是“Angular排序的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前标题:Angular排序的示例分析
文章URL:https://www.cdcxhl.com/article0/jchsio.html
成都网站建设公司_创新互联,为您提供网站设计公司、搜索引擎优化、自适应网站、域名注册、手机网站建设、网站内链
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联