angular.js table content search and filter sample code-JS Tutorial-php.cn

angular.js table content search and filter sample code

小云云

Release： 2017-12-18 15:15:04

Original

1380 people have browsed it

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 = '';
}
}
});

Copy after login

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!