angular实现全选,反选,批量删除,删除,全不选,倒序,模糊查找等功能

简介: angular实现全选,反选,批量删除,删除,全不选,倒序,模糊查找等功能

效果图如下:

html代码如下:

1. <body ng-app="myApp"  ng-controller="myCtrl">
2.    <button ng-click="dx(seq)">倒序</button>
3.    <button ng-click="qx()">全选</button>
4.    <button ng-click="fx()">反选</button>
5.    <button ng-click="nontx()">全不选</button>
6.    <button ng-click="allDel()">全部删除</button>
7.    <button ng-click="pi()">批量删除</button>
8.    <input ng-model="search" type="text" placeholder="请输入姓名" />
9.    <input ng-model="city" type="text" placeholder="请输入国家" />
10. 
11.     <table width="800" border="1">
12.       <tr align="center">
13.         <td >全选</td>
14.         <td>序号</td>
15.         <td>国家</td>
16.         <td>名字</td>
17.         <td>年龄</td>
18.         <td>删除</td>
19.       </tr>
20.       <tr align="center" ng-repeat="x in lists | orderBy:order+orderBy | filter :{country:search}|filter:{name:city}">
21.         <td><input type="checkbox" ng-model="x.ck" /></td>
22.         <td>{{x.seq}}</td>
23.         <td>{{x.name}}</td>
24.         <td>{{x.country}}</td>
25.         <td>{{x.age}}</td>
26.         <td><button ng-click="del($index)"> 删除</button></td>
27.       </tr>
28. 
29.     </table>
30. 
31.   </body>

js代码如下:

1. var vm=angular.module('myApp',[])
2.            vm.controller('myCtrl',function($scope){
3.            $scope.lists=[
4.                 { seq: 1, name: "魏国", country: "曹操",age : 45 ,state:'false'},
5.                        { seq: 2, name: "魏国", country: "张辽" ,age: 34,state:'false'},
6.                        { seq: 3, name: "魏国", country: "司马懿" ,age: 36,state:'false' },
7.                        { seq: 4, name: "魏国", country: "夏侯淳",age: 40,state:'false' },
8.                        { seq: 5, name: "蜀国", country: "刘备",age: 50,state:'false' },
9.                        { seq: 6, name: "蜀国", country: "关羽",age: 45,state:'false' },
10.                         { seq: 7, name: "蜀国", country: "张飞",age: 46,state:'false' },
11.                         { seq: 8, name: "蜀国", country: "赵云",age: 35,state:'false' },
12.                         { seq: 9, name: "吴国", country: "孙权" ,age: 30,state:'false' },
13.                         { seq: 10, name: "吴国", country: "周瑜",age: 32 ,state:'false'},
14.                         { seq: 11, name: "吴国", country: "鲁肃",age: 33,state:'false' },
15.                         { seq: 12, name: "吴国", country: "黄盖",age: 55,state:'false' }
16. 
17.             ]
18.             // 倒序
19.             $scope.order=" "
20.             $scope.dx=function(type){
21.               $scope.orderType=type ; 
22.               if ($scope.order === '') {
23.                 $scope.order="-"
24.               } else{
25.                 $scope.order=""
26.               }
27. 
28.             }
29.             //全选
30. 
31.             $scope.qx=function(){
32.               for (var i=0 ; i<$scope.lists.length ; i++) {
33.                 var x=$scope.lists[i]
34.                 if (x.ck==x.ck) {
35.                   x.ck=true
36.                 } 
37. 
38.               }
39. 
40. 
41.             }
42. 
43.             //反选
44.             $scope.fx=function(){
45.               for (var i=0 ; i<$scope.lists.length ; i++) {
46.                 var x=$scope.lists[i]
47.                 if (x.ck==x.ck) {
48.                   x.ck=!x.ck
49.                 }
50. 
51.               }
52.             }
53.             //全不选
54.             $scope.nontx=function(){
55.               for (var i=0 ; i<$scope.lists.length ; i++) {
56.                 var x=$scope.lists[i]
57.                 if (x.ck==x.ck) {
58.                   x.ck=false
59.                 }
60. 
61.               }
62.             }
63.             //批量删除
64.             $scope.pi=function(){
65. //                alert("是否删除此数据")
66.               for (var i=0 ; i<$scope.lists.length ; i++) {
67. 
68.                   if ($scope.lists[i].ck==true) {
69.                   $scope.lists.splice(i,1)
70.                   i--;
71.                 }
72. 
73. 
74.               }
75. 
76.             }
77.             //删除
78.             $scope.del=function(index){
79.               if (confirm('确认要删除此数据吗?')) {
80.                 $scope.lists.splice(index,1)
81.               }
82. 
83.             }
84. 
85.             //全部删除
86.             $scope.allDel=function(){
87. 
88.               if ($scope.lists.length == 0) {
89.                 alert("数据已清空")
90.               } else{
91.                 $scope.lists=[]
92.               }
93.             }
94. 
95.             // 添加 修改数据
96. 
97.             })

 

相关文章
|
7月前
【实用】Angular中如何实现类似Vuex的全局变量状态变化功能?
【实用】Angular中如何实现类似Vuex的全局变量状态变化功能?
|
JavaScript 前端开发 API
Angular1.4.6框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能(小试牛刀)
Angular1.4.6框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能(小试牛刀)
angular40-angular实现todolist3编辑功能
angular40-angular实现todolist3编辑功能
106 0
angular40-angular实现todolist3编辑功能
|
JavaScript Shell API
Angular5.1以及更多可用功能
我们很高兴的宣布Angular5.1版本发布了。这是一个小版本,包含几个小的功能和bug修复。我们也发布了Angular Cli的1.6版本,以及Angular Material的第一个稳定版本。
1354 0
|
4月前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `&lt;p:inputText&gt;` 和 `&lt;p:calendar&gt;` 等组件创建用户表单,并用 `&lt;p:dataTable&gt;` 展示数据集合,提升 JSF 应用的易用性和开发效率。
63 0
|
4月前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
57 0
|
4月前
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
123 0
|
4月前
|
前端开发 开发者 安全
JSF支付功能大揭秘:探索如何在Java世界中实现安全无缝的在线支付体验
【8月更文挑战第31天】在电子商务和在线交易日益普及的今天,实现在线支付功能已成为许多Web应用的必备需求。JavaServer Faces (JSF) 作为一种流行的Java Web框架,提供了丰富的组件和工具来构建用户界面,包括与支付网关集成以实现在线支付。支付网关是处理信用卡和借记卡支付的系统,在商家和银行之间起到桥梁作用。本文将探讨如何使用JSF与支付网关集成,以及实现在线支付功能时需要考虑的关键点
50 0
|
4月前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
53 0