search

Home  >  Article  >  Web Front-end  >  angular.js table content search and filter sample code

angular.js table content search and filter sample code

小云云
小云云Original
2017-12-18 15:15:041341browse

In this article, we mainly share with you the angular.js table content search and filter sample code, hoping to help everyone.

angular.js table content search and filter code

 <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">


<p 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 ===&#39;&#39;}" ng-click="changeOrder(&#39;id&#39;)"> 产品编号<span class="caret"></span> </th>
        <th ng-class="{dropup:order ===&#39;&#39;}" ng-click="changeOrder(&#39;name&#39;)"> 产品名称<span class="caret"></span> </th>
        <th ng-class="{dropup:order === &#39;&#39;}" ng-click="changeOrder(&#39;price&#39;)"> 产品价格<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>
</p>


index.js
var 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 = '';
}
}
});

Related recommendations;

Detailed explanation of python implementation of collaborative filtering recommendation algorithm

Detailed explanation of Angularjs filters to implement dynamic search and sorting functions

Introduction to filters and custom filters

The above is the detailed content of angular.js table content search and filter sample code. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of how vue and css3 implement interactive effectsNext article：Detailed explanation of how vue and css3 implement interactive effects

Related articles

See more