AngularJS：模糊查詢過濾內容，下拉選單排序，過濾敏感字元，驗證判斷後新增表格資訊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用者資訊：奇偶數隔行變色，選中行變色，滑鼠變小手樣式；姓名查詢條件，過濾敏感字元；下拉列表排序；非空驗證新增資訊；點選按鈕刪除</title>
<script src="angular-1.5.5/angular.js"></script>
<style type="text/css">
.first {
background-color: darkgrey;
}
.tr_odd {
background-color: orange;
}
.tr_even {
background-color: aqua;
}
.mouse_color {
background-color: green;
}
#tab {
border: 1px #FF0000 solid;
text-align: center;
}
tbody tr {
background: #d0d0d0;
}
tbody tr:nth-child(2n) {
background: #ffffff;
}
tbody tr:hover{background: red;}
</style>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$filter) {
$scope.users = [{
name: "張三",
age: 20,
pin: "zhang san",
zhi: "總經理"
},
{
name: "李四",
age: 18,
pin: "li si",
zhi: "設計師"
},
{
name: "王五",
age: 45,
pin: "wang wu",
zhi: "工程師"
},
{
name: "趙六",
age: 33,
pin: "zhao liu",
zhi: "工程師"
},
{
name: "周七",
age: 32,
pin: "zhou qi",
zhi: "人事經理"
}
];
//1. 實現姓名查詢條件框5分，實現查詢條件框內的內容為空點選查詢按鈕時alert提示”請輸入姓名”5分；
// 實現按姓名搜尋表格內容功能5分，當搜尋內容未找到匹配項時提示”未找到內容”5分，當搜尋內容有敏感詞時，alert提示
//過濾敏感字元：槍 法輪功
$scope.xun = "";
$scope.select = function() {
/*$(function() {
var searchName = $("input:eq(0)").val();*/
//實現查詢條件框內的內容為空點選查詢按鈕時alert提示”請輸入姓名”
if($scope.searchText == "" || $scope.searchText == undefined) {
alert("請輸入姓名");
} else {
//當搜尋內容有敏感詞時，alert提示
if($scope.searchText == "槍" || $scope.searchText == "法輪功") {
alert("輸入內容含有敏感字元！");
$scope.searchText = "";
} else {
var arr = $filter("filter")($scope.users,{"name":$scope.searchText});
if(arr!= 0) {
$scope.xun = $scope.searchText;
} else {
alert("未找到內容！");
}
// //實現按姓名搜尋表格內容功能5分，當搜尋內容未找到匹配項時提示”未找到內容”
// var flag = false;
// for(index in $scope.users) {
// if(searchName == $scope.users[index].name) {
//
// $scope.users.push(aa);
// flag = true;
//
// }
//
// }
// if(flag) {
// alert("已找到內容");
// } else {
// alert("未找到內容！");
// }
// }
}
}
}
//2.實現排序下拉列表展示5分，實現按照年齡倒序排序5分，實現按照年齡正序排序
$scope.order = "age";
//3. 實現使用者新增頁，按要求實現內容新增5分，實現新增內容時的校驗，當年齡不為數字時alert提示使用者”年齡格式錯誤”功能5分，實現新增使用者資訊到列表中
$scope.show = false;
$scope.add = function() {
$scope.show = true;
}
$scope.name = "";
$scope.age = "";
$scope.pin = "";
$scope.zhi = "";
//點選新增使用者資訊的按鈕,驗證非空情況後，再新增
$scope.sub = function() {
$scope.flag1 = false;
$scope.flag2 = false;
$scope.flag3 = false;
$scope.flag4 = false;
//姓名非空
if($scope.name == null || $scope.name == "") {
alert("姓名不得為空！");
return false;
} else {
$scope.flag1 = true;
}
//當年齡不為數字時alert提示使用者”年齡格式錯誤”功能
if($scope.age == "" || $scope.age == null) {
alert("年齡不能為空！");
return false;
} else if(isNaN($scope.age)) {
alert("年齡格式錯誤！");
return false;
} else {
$scope.flag2 = true;
}
//姓名拼音
if($scope.pin == null || $scope.pin == "") {
alert("姓名拼音不得為空！");
return false;
} else {
$scope.flag3 = true;
}
//職位判斷
if($scope.zhi == "" || $scope.zhi == null) {
alert("職位不能為空！");
return false;
} else if(isNaN($scope.zhi) == false) {
alert("職位不能為數字！");
return false;
} else {
$scope.flag4 = true;
}
//符合條件後再提交新增
if($scope.flag1 == true && $scope.flag2 == true && $scope.flag3 == true && $scope.flag4 == true) {
//新增成功後清空資訊
var inputs = document.getElementsByTagName("input");
for(i = 0; i < inputs.length; i++) {
inputs.item(i).value = "";
}
//設定新資料
var newUser = {
name: $scope.name,
age: parseInt($scope.age),
pin: $scope.pin,
zhi: $scope.zhi
}
//新增新使用者
$scope.users.push(newUser);
$scope.show = false;
} else {
return false;
}
}
//4. 實現點選刪除時彈出二次確認詢問框5分，實現刪除功能，刪除後從列表中消失5分。注：詢問框可使用js的confirm實現
$scope.remove = function(selectName) {
if(confirm("您是否要將該使用者從列表中刪除？")) {
//根據列名刪除資料，首先根據所在下標遍歷所有內容
for(index in $scope.users) {
if($scope.users[index].name == selectName) {
//使用js中的刪除方法，每次刪除的專案數量為1行
$scope.users.splice(index, 1);
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
<h5>使用者列表</h5> 姓名查詢條件
<input id="searchText" ng-model="searchText" >
<select ng-model="order">
<option value="-age">按年齡倒序</option>
<option value="age">按年齡正序</option>
<option value="-name">按姓名倒序</option>
<option value="name">按姓名正序</option>
</select>
</div> <br>
<table id="tab" cellspacing="0" cellpadding="20" border="1 solid black">
<thead align="left">
<tr style="background: goldenrod;">
<th>姓名</th>
<th>年齡</th>
<th>拼音</th>
<th>職位</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | orderBy:order |filter:{name:xun}">
<td pinyin="name">{{user.name}}</td>
<td pinyin="age">{{user.age}}</td>
<td pinyin="pin">{{user.pin}}</td>
<td pinyin="zhi">{{user.zhi}}</td>
<!-- 實現滑鼠移動到刪除上時變為小手樣式-->
<td>
<a ng-click="remove(user.name)">
<div style="cursor:pointer;">刪除</div>
</a>
</td>
</tr>
</tbody>
</table> <br>
<div>
<button ng-click="select()">查詢</button>
<button ng-click="add()">新增使用者</button>
</div>
<!-- 新增使用者資訊區域 -->
<div ng-show="show">
<h5>新增使用者資訊</h5>
<table cellspacing="0" cellpadding="12" border="1 solid black">
<tr>
<th>姓名</th>
<td><input type="text" ng-model="name" placeholder="請輸入姓名"></td>
</tr>
<tr>
<th>年齡</th>
<td><input type="text" ng-model="age" placeholder="請輸入年齡"></td>
</tr>
<tr>
<th>拼音</th>
<td><input type="text" ng-model="pin" placeholder="請輸入拼音"></td>
</tr>
<tr>
<th>職位</th>
<td><input type="text" ng-model="zhi" placeholder="請輸入職位"></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="sub()">儲存</button></td>
</tr>
</table>
</div>
</center>
</body>
</html>