Beispielcode zum Suchen und Filtern von Tabelleninhalten in angle.js-js-Tutorial-php.cn

Beispielcode zum Suchen und Filtern von Tabelleninhalten in angle.js

小云云

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

Original

1360 Leute haben es durchsucht

In diesem Artikel teilen wir Ihnen hauptsächlich den Beispielcode für die Suche und Filterung von Tabelleninhalten in angle.js mit, in der Hoffnung, allen zu helfen.

Angular.js-Tabelleninhaltssuch- und Filtercode

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

Nach dem Login kopieren

Verwandte Empfehlungen;

Detaillierte Erläuterung des in Python implementierten kollaborativen Filterempfehlungsalgorithmus

Detaillierte Erläuterung der Angularjs-Filter zur Implementierung dynamischer Such- und Sortierfunktionen

Einführung in Filter und benutzerdefinierte Filter

Das obige ist der detaillierte Inhalt vonBeispielcode zum Suchen und Filtern von Tabelleninhalten in angle.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!