suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispielcode zum Suchen und Filtern von Tabelleninhalten in angle.js

Beispielcode zum Suchen und Filtern von Tabelleninhalten in angle.js

小云云
小云云Original
2017-12-18 15:15:041356Durchsuche

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erklärung, wie Vue und CSS3 interaktive Effekte implementierenNächster Artikel：Detaillierte Erklärung, wie Vue und CSS3 interaktive Effekte implementieren

In Verbindung stehende Artikel

Mehr sehen