How to implement orderBy sorting and fuzzy query in Angular-JS Tutorial-php.cn

How to implement orderBy sorting and fuzzy query in Angular

亚连

Release： 2018-06-14 15:31:21

Original

1680 people have browsed it

This article mainly introduces the built-in filter orderBy sorting and fuzzy query functions implemented by Angular, involving AngularJS filters, sorting, string traversal, query and other related operation skills. Friends in need can refer to it

This article describes the built-in filter orderBy sorting and fuzzy query functions implemented by Angular. Share it with everyone for your reference, the details are as follows:

Let’s take a look at the running effect first:

The specific code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net Angular模糊查询、排序</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    table{
      margin: 100px auto;
      border-collapse: collapse;
    }
    th,td{
      padding: 10px;
      border: 1px solid #000;
    }
  </style>
  <script src="angular.min.js"></script>
  <script>
    var myapp=angular.module("myapp",[]);
    myapp.controller("myCtrl",function ($scope) {
      $scope.books=[{
        name:"JavaScript",public:false,update:"1504707661308",has:true
      },{
        name:"Angular权威教程",public:false,update:"1204707661308",has:false
      },{
        name:"Vue实战",public:false,update:"1804707661308",has:false
      },{
        name:"JavaScript",public:true,update:"1504707561308",has:true
      }];
      $scope.price="99.9";
      /*$scope.filt=""*/
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="filt">
<table>
  <thead><tr>
    <th>名字</th>
    <th>出版情况</th>
    <th>更新时间</th>
    <th>是否有库存</th>
  </tr></thead>
  <tbody>
  <!--|limitTo:2显示两条数据-->
  <tr ng-repeat="item in books | filter:filt |orderBy:&#39;-name&#39;:false">
    <td>{{item.name|lowercase}}</td>
    <td>{{item.public}}</td>
    <td>{{item.update |date:&#39;yyyy年MM月dd日 hh:mm:ss EEE&#39;}}</td>
    <td>{{item.has}}</td>
  </tr>
  </tbody>
</table>
<p>{{price|currency:"￥"}}</p>
</body>
</html>

Copy after login

Above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Configuring steps for Axios (detailed tutorial)

Compatible browser issues in JS

How to get the value of SessionStorage using JS

How to implement the login and registration function using node.js and other technologies?

How to use filter filter in vue

The above is the detailed content of How to implement orderBy sorting and fuzzy query in Angular. For more information, please follow other related articles on the PHP Chinese website!