ホームページ > 記事 > ウェブフロントエンド > angular.js テーブル コンテンツの検索とフィルターのサンプル コード
angular.js テーブル コンテンツの検索とフィルターのサンプル コード
- 小云云オリジナル
- 2017-12-18 15:15:041341ブラウズ
この記事では、皆さんのお役に立つことを願って、主に angular.js テーブル コンテンツの検索とフィルターのサンプル コードを共有します。
angular.js テーブルコンテンツの検索とフィルタリングコード
<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 ===''}" ng-click="changeOrder('id')"> 产品编号<span class="caret"></span> </th>
<th ng-class="{dropup:order ===''}" ng-click="changeOrder('name')"> 产品名称<span class="caret"></span> </th>
<th ng-class="{dropup:order === ''}" ng-click="changeOrder('price')"> 产品价格<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 = '';
}
}
});
関連する推奨事項;
協調フィルタリング推奨アルゴリズムの Python 実装の詳細な説明
動的検索と並べ替え機能を実装する Angularjs フィルターの詳細な説明
以上がangular.js テーブル コンテンツの検索とフィルターのサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。