在Angular中如何实现table表格排序
这篇文章主要介绍了Angular实现的table表格排序功能,结合完整实例形式分析了AngularJS表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下
本文实例讲述了Angular实现的table表格排序功能。分享给大家供大家参考，具体如下：
先来看看效果图：
完整代码如下：
<!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>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在Parcel.js + Vue 2.x中如何做到极速零配置打包
使用Vue时浏览器后退无法触发beforeRouteLeave的问题
Atas ialah kandungan terperinci 在Angular中如何实现table表格排序. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Bagaimana untuk mengisih foto mengikut tarikh yang diambil dalam Windows 11/10
Feb 19, 2024 pm 08:45 PM
Artikel ini akan memperkenalkan cara mengisih gambar mengikut tarikh penangkapan dalam Windows 11/10, dan juga membincangkan perkara yang perlu dilakukan jika Windows tidak menyusun gambar mengikut tarikh. Dalam sistem Windows, menyusun foto dengan betul adalah penting untuk memudahkan anda mencari fail imej. Pengguna boleh mengurus folder yang mengandungi foto berdasarkan kaedah pengisihan yang berbeza seperti tarikh, saiz dan nama. Selain itu, anda boleh menetapkan tertib menaik atau menurun mengikut keperluan untuk menyusun fail dengan lebih fleksibel. Cara Isih Foto mengikut Tarikh Diambil dalam Windows 11/10 Untuk mengisih foto mengikut tarikh yang diambil dalam Windows, ikut langkah berikut: Buka Gambar, Desktop atau mana-mana folder tempat anda meletakkan foto Dalam menu Reben, klik
Cara mengisih e-mel mengikut penghantar, subjek, tarikh, kategori, saiz dalam Outlook
Feb 19, 2024 am 10:48 AM
Outlook menawarkan banyak tetapan dan ciri untuk membantu anda mengurus kerja anda dengan lebih cekap. Salah satunya ialah pilihan pengisihan yang membolehkan anda mengkategorikan e-mel anda mengikut keperluan anda. Dalam tutorial ini, kami akan mempelajari cara menggunakan ciri pengisihan Outlook untuk menyusun e-mel berdasarkan kriteria seperti pengirim, subjek, tarikh, kategori atau saiz. Ini akan memudahkan anda memproses dan mencari maklumat penting, menjadikan anda lebih produktif. Microsoft Outlook ialah aplikasi berkuasa yang memudahkan untuk mengurus jadual e-mel dan kalendar anda secara berpusat. Anda boleh menghantar, menerima dan mengatur e-mel dengan mudah, manakala fungsi kalendar terbina dalam memudahkan untuk menjejaki acara dan janji temu anda yang akan datang. Bagaimana untuk berada di Outloo
Menapis dan menyusun data XML menggunakan Python
Aug 07, 2023 pm 04:17 PM
Melaksanakan penapisan dan pengisihan data XML menggunakan Python Pengenalan: XML ialah format pertukaran data yang biasa digunakan yang menyimpan data dalam bentuk teg dan atribut. Apabila memproses data XML, kami selalunya perlu menapis dan mengisih data. Python menyediakan banyak alat dan perpustakaan yang berguna untuk memproses data XML. Artikel ini akan memperkenalkan cara menggunakan Python untuk menapis dan mengisih data XML. Membaca fail XML Sebelum kita mula, kita perlu membaca fail XML. Python mempunyai banyak perpustakaan pemprosesan XML,
Pembangunan PHP: Bagaimana untuk melaksanakan pengisihan data jadual dan fungsi halaman
Sep 20, 2023 am 11:28 AM
Pembangunan PHP: Bagaimana untuk melaksanakan fungsi pengisihan data jadual dan halaman Dalam pembangunan web, memproses sejumlah besar data adalah tugas biasa. Untuk jadual yang perlu memaparkan sejumlah besar data, biasanya perlu melaksanakan fungsi pengisihan dan halaman untuk memberikan pengalaman pengguna yang baik dan mengoptimumkan prestasi sistem. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi pengisihan dan halaman data jadual, dan memberikan contoh kod khusus. Fungsi pengisihan melaksanakan fungsi pengisihan dalam jadual, membolehkan pengguna mengisih dalam tertib menaik atau menurun mengikut medan yang berbeza. Berikut ialah borang pelaksanaan
Bagaimana untuk memasang Angular pada Ubuntu 24.04
Mar 23, 2024 pm 12:20 PM
Angular.js ialah platform JavaScript yang boleh diakses secara bebas untuk mencipta aplikasi dinamik. Ia membolehkan anda menyatakan pelbagai aspek aplikasi anda dengan cepat dan jelas dengan memanjangkan sintaks HTML sebagai bahasa templat. Angular.js menyediakan pelbagai alatan untuk membantu anda menulis, mengemas kini dan menguji kod anda. Selain itu, ia menyediakan banyak ciri seperti penghalaan dan pengurusan borang. Panduan ini akan membincangkan cara memasang Angular pada Ubuntu24. Mula-mula, anda perlu memasang Node.js. Node.js ialah persekitaran berjalan JavaScript berdasarkan enjin ChromeV8 yang membolehkan anda menjalankan kod JavaScript pada bahagian pelayan. Untuk berada di Ub
Program C++: susun semula kedudukan perkataan dalam susunan abjad
Sep 01, 2023 pm 11:37 PM
Dalam masalah ini, rentetan diberikan sebagai input dan kita perlu mengisih perkataan yang terdapat dalam rentetan dalam susunan leksikografi. Untuk melakukan ini, kami menetapkan indeks bermula dari 1 kepada setiap perkataan dalam rentetan (dipisahkan oleh ruang) dan mendapatkan output dalam bentuk indeks yang diisih. String={"Hello","World"}"Hello"=1 "World"=2 Memandangkan perkataan dalam rentetan input adalah dalam susunan leksikografi, output akan mencetak "12". Mari lihat beberapa senario input/hasil - dengan mengandaikan semua perkataan dalam rentetan input adalah sama, mari lihat keputusan - Input:{"hello","hello","hello"}Result:3 Keputusan diperoleh
Bagaimanakah kaedah Arrays.sort() dalam Java menyusun tatasusunan mengikut pembanding tersuai?
Nov 18, 2023 am 11:36 AM
Bagaimanakah kaedah Arrays.sort() dalam Java menyusun tatasusunan mengikut pembanding tersuai? Di Java, kaedah Arrays.sort() ialah kaedah yang sangat berguna untuk menyusun tatasusunan. Secara lalai, kaedah ini disusun mengikut tertib menaik. Tetapi kadangkala, kita perlu mengisih tatasusunan mengikut peraturan yang ditentukan sendiri. Pada masa ini, anda perlu menggunakan pembanding tersuai (Comparator). Pembanding tersuai ialah kelas yang melaksanakan antara muka Pembanding.
Bagaimana untuk mengisih markah WPS
Mar 20, 2024 am 11:28 AM
Dalam kerja kami, kami sering menggunakan perisian wps Terdapat banyak cara untuk memproses data dalam perisian wps, dan fungsinya juga sangat berkuasa Kami sering menggunakan fungsi untuk mencari purata, ringkasan, dan sebagainya kaedah yang boleh digunakan untuk data statistik telah disediakan untuk semua orang dalam perpustakaan perisian WPS Di bawah kami akan memperkenalkan langkah-langkah bagaimana untuk mengisih markah dalam WPS Selepas membaca ini, anda boleh belajar daripada pengalaman. 1. Mula-mula buka jadual yang perlu diberi ranking. Seperti yang ditunjukkan di bawah. 2. Kemudian masukkan formula =pangkat(B2, B2: B5, 0), dan pastikan anda memasukkan 0. Seperti yang ditunjukkan di bawah. 3. Selepas memasukkan formula, tekan kekunci F4 pada papan kekunci komputer Langkah ini adalah untuk menukar rujukan relatif kepada rujukan mutlak.
