Angular でテーブルの並べ替えを実装する方法
この記事では、主に Angular によって実装されたテーブル ソート機能を紹介し、AngularJS テーブル ソートに関連するイベント レスポンス、要素トラバーサル、属性変更、およびその他の関連操作スキルを完全な例の形式で分析します。この記事では
Angularで実装されたテーブルソート機能について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
まずレンダリングを見てみましょう:
完全なコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>www.jb51.net Angular表格排序</title>
<style>
table{
border: 1px solid;
text-align: center;
width: 40%;
height: 400px;
}
tr,td{
border: 1px solid;
}
tr:nth-child(2n){
background: gainsboro;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script>
var app=angular.module("MyApp",[]);
app.controller("demoC",["$scope",function($scope){
$scope.shop=[{ state1:false,id:9001,name:"iphoneX",username:"张三",tel:13525565588,price:8699,city:"北京",time:new Date('11-23 10:00:00'),state:"已发货"},
{state1:false,id:3007,name:"iphone6",username:"王红",tel:18524565588,price:5635,city:"郑州",time:new Date('11-23 11:38:20'),state:"已发货"},
{state1:false,id:5312,name:"iphone7",username:"赵小龙",tel:17545585598,price:6180,city:"北京",time:new Date('11-23 9:17:00'),state:"未发货"},
{state1:false,id:2132,name:"iphone8",username:"赵强",tel:17625565618,price:7190,city:"上海",time:new Date('11-23 10:40:00'),state:"未发货"}
];
$scope.ckAll=function(){
for(var i in $scope.shop){
$scope.shop[i].state1=$scope.ckall;
}
}
$scope.del=function(){
for(var i=0; i<$scope.shop.length; i++){
if($scope.shop[i].state=="已发货"&&$scope.shop[i].state){
$scope.shop.splice(i,1);
i--;
}
}
}
$scope.add=function(){
var sname=$scope.sname;
var susername=$scope.susername;
var stel=$scope.stel;
var sprice=$scope.sprice;
var scity=$scope.scity;
if(sname==undefined || sname==""){
alert("用户名不能为空");
$("#s").css("border-color","red");
}else if(susername==undefined || susername==""){
alert("商品名不能为空");
$("#y").css("border-color","red");
}else if(stel==undefined || stel==""){
alert("手机号不能为空");
$("#t").css("border-color","red");
}else if(sprice==undefined || sprice==""){
alert("价格不能为空");
$("#p").css("border-color","red");
}else if(scity==undefined || scity==""){
alert("城市必须选择");
}
else{
$scope.shop.push({name:sname,username:susername,tel:stel,price:sprice,city:scity})
$scope.toto=false;
}
}
}])
</script>
</head>
<body ng-app="MyApp" ng-controller="demoC">
<button ng-click="toto=true" style="background-color: greenyellow;">新增订单</button>
<button ng-click="del()" style="background-color: greenyellow;">批量删除</button>
<input type="text" placeholder="按商品名称查询" ng-model="selname" />
<input type="text" placeholder="按手机号查询" ng-model="seltel"/>
<select ng-model="selstate">
<option value="">按状态查询</option>
<option value="已发货">已发货</option>
<option value="未发货">未发货</option>
</select>
<table cellpadding="0px" cellspacing="0px">
<tr style="background-color: gray;">
<td><input type="checkbox" ng-model="ckall" ng-click="ckAll()"></td>
<td>id<button ng-click="px='id';flag=!flag" style="background-color: greenyellow;">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="px='price';flag=!flag" style="background-color: greenyellow;">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="px='time';flag=!flag" style="background-color: greenyellow;">排序</button></td>
<td>状态</td>
</tr>
<tr ng-repeat="s in shop | filter:{name:selname} | filter:{tel:seltel} | filter:{state:selstate} | orderBy:px:flag ">
<td><input type="checkbox" ng-model="s.state1"></td>
<td>{{s.id}}</td>
<td>{{s.name}}</td>
<td>{{s.username}}</td>
<td>{{s.tel}}</td>
<td>{{s.price | currency:"￥"}}</td>
<td>{{s.city}}</td>
<td>{{s.time | date : 'MM-HH hh:dd:ss'}}</td>
<td><span ng-show="s.state=='已发货'" style="color: greenyellow;">{{s.state}}</span>
<span ng-show="s.state=='未发货'" style="color: yellow;"><a href="#" rel="external nofollow" ng-click="s.state='已发货'">{{s.state}}</a></span></td>
</tr>
</table>
<p style="margin-top: 50px; margin-left: 100px;">
<form ng-show="toto">
商品名：<input type="text" / ng-model="sname" id="s"><br /><br />
用户名：<input type="text" ng-model="susername"id="y"/><br /><br />
手机号：<input type="text" ng-model="stel" id="t"/><br /><br />
价格为：<input type="text" ng-model="sprice" id="p"/><br /><br />
城市：<select ng-model="scity">
<option value="">--选择城市--</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="郑州">郑州</option>
</select><br /><br />
<button ng-click="add()">保存</button>
</form>
</p>
</body>
</html>上記は私が皆さんのためにコンパイルしたものです。将来的には誰にとっても役立つことを願っています。
関連記事:
vue で一般的に使用されるコンポーネントとフレームワーク構造 (詳細なチュートリアル)
fastclick コードのタップ「クリックスルー」を解決する方法
アニメでアニメーション効果を実現する方法。 js Marquee
Parcel.js + Vue 2.xで超高速なゼロ設定パッケージングを実現する方法
Vue使用時にブラウザバック時にbeforeRouteLeaveがトリガーできない問題
WeChat ミニプログラムで録音および再生録音機能を実装する方法
以上がAngular でテーブルの並べ替えを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7640
15
1391
52
90
11
32
150
Windows 11/10で写真を撮影日ごとに並べ替える方法
Feb 19, 2024 pm 08:45 PM
この記事では、Windows 11/10 で写真を撮影日順に並べ替える方法を紹介し、Windows で写真が日付順に並べ替えられない場合の対処法についても説明します。 Windows システムでは、画像ファイルを見つけやすくするために、写真を適切に整理することが重要です。ユーザーは、日付、サイズ、名前などのさまざまな並べ替え方法に基づいて写真を含むフォルダーを管理できます。さらに、必要に応じて昇順または降順を設定して、ファイルをより柔軟に整理できます。 Windows 11/10 で写真を撮影日で並べ替える方法 Windows で写真を撮影日で並べ替えるには、次の手順に従います。 [ピクチャ]、デスクトップ、または写真を配置する任意のフォルダを開きます。 リボン メニューで、
Outlook でメールを送信者、件名、日付、カテゴリ、サイズで並べ替える方法
Feb 19, 2024 am 10:48 AM
Outlook には、作業をより効率的に管理するための多くの設定と機能が用意されています。その 1 つは、ニーズに応じてメールを分類できる並べ替えオプションです。このチュートリアルでは、Outlook の並べ替え機能を使用して、送信者、件名、日付、カテゴリ、サイズなどの基準に基づいてメールを整理する方法を学習します。これにより、重要な情報の処理と検索が容易になり、生産性が向上します。 Microsoft Outlook は、電子メールやカレンダーのスケジュールを簡単に一元管理できる強力なアプリケーションです。電子メールの送受信、整理が簡単にできるほか、内蔵のカレンダー機能により今後のイベントや予定を簡単に追跡できます。 Outlo の使い方
Python を使用した XML データのフィルタリングと並べ替え
Aug 07, 2023 pm 04:17 PM
Python を使用した XML データのフィルタリングと並べ替えの実装 はじめに: XML は、データをタグと属性の形式で保存する、一般的に使用されるデータ交換形式です。 XML データを処理するとき、多くの場合、データのフィルタリングと並べ替えが必要になります。 Python には、XML データを処理するための便利なツールとライブラリが多数用意されています。この記事では、Python を使用して XML データをフィルタリングおよび並べ替える方法を紹介します。 XML ファイルの読み取り 始める前に、XML ファイルを読み取る必要があります。 Python には XML 処理ライブラリが多数ありますが、
PHP 開発: テーブル データのソート機能とページング機能を実装する方法
Sep 20, 2023 am 11:28 AM
PHP 開発: テーブル データのソート機能とページング機能を実装する方法 Web 開発では、大量のデータを処理するのが一般的なタスクです。大量のデータを表示する必要があるテーブルの場合、通常、優れたユーザー エクスペリエンスを提供し、システム パフォーマンスを最適化するために、データの並べ替え機能とページング機能を実装する必要があります。この記事では、PHP を使用してテーブル データのソート機能とページング機能を実装する方法と、具体的なコード例を紹介します。ソート機能はテーブルにソート機能を実装しており、ユーザーはさまざまなフィールドに従って昇順または降順でソートできます。以下は実装フォームです
Ubuntu 24.04 に Angular をインストールする方法
Mar 23, 2024 pm 12:20 PM
Angular.js は、動的アプリケーションを作成するための無料でアクセスできる JavaScript プラットフォームです。 HTML の構文をテンプレート言語として拡張することで、アプリケーションのさまざまな側面を迅速かつ明確に表現できます。 Angular.js は、コードの作成、更新、テストに役立つさまざまなツールを提供します。さらに、ルーティングやフォーム管理などの多くの機能も提供します。このガイドでは、Ubuntu24 に Angular をインストールする方法について説明します。まず、Node.js をインストールする必要があります。 Node.js は、ChromeV8 エンジンに基づく JavaScript 実行環境で、サーバー側で JavaScript コードを実行できます。ウブにいるために
C++ プログラム: 単語の位置をアルファベット順に並べ替えます。
Sep 01, 2023 pm 11:37 PM
この問題では、文字列が入力として与えられ、その文字列に出現する単語を辞書順に並べ替える必要があります。これを行うには、文字列内の各単語 (スペースで区切られている) に 1 から始まるインデックスを割り当て、ソートされたインデックスの形式で出力を取得します。 String={"Hello","World"}"Hello"=1 "World"=2 入力文字列内の単語は辞書編集順であるため、出力には「12」が出力されます。いくつかの入力/結果のシナリオを見てみましょう - 入力文字列内のすべての単語が同じであると仮定して、結果を見てみましょう - 入力:{"hello","hello","hello"}結果:3 取得された結果
Java の Arrays.sort() メソッドはカスタム コンパレータによって配列をどのようにソートしますか?
Nov 18, 2023 am 11:36 AM
Java の Arrays.sort() メソッドはカスタム コンパレータによって配列をどのようにソートしますか? Java では、Arrays.sort() メソッドは配列を並べ替えるのに非常に便利なメソッドです。デフォルトでは、このメソッドは昇順で並べ替えます。ただし、場合によっては、独自に定義したルールに従って配列を並べ替える必要があります。このとき、カスタムコンパレータ（Comparator）を使用する必要があります。カスタム コンパレータは、Comparator インターフェイスを実装するクラスです。
WPS スコアを並べ替える方法
Mar 20, 2024 am 11:28 AM
私たちの仕事では、wps ソフトウェアをよく使用します。wps ソフトウェアではデータを処理する方法がたくさんあり、機能も非常に強力です。平均値や要約などを求める関数をよく使用します。統計データに使用できるメソッドは、WPS ソフトウェア ライブラリで誰でも利用できるように用意されています。以下では、WPS でスコアをソートする手順を紹介します。これを読んだ後、経験から学ぶことができます。 1. まず、ランク付けする必要があるテーブルを開きます。以下に示すように。 2. 次に、数式 =rank(B2, B2: B5, 0) を入力します。必ず 0 を入力してください。以下に示すように。 3. 数式を入力した後、コンピュータのキーボードの F4 キーを押すと、相対参照が絶対参照に変更されます。
