注：添加球员的功能无指定技术要求，添加球员的页面也无具体样式要求。
4.实现倒序，实现正序，下拉列表排序效果都实现
5.按钮背景一致，按钮样式
6.实现添加球员页面，添加球员页面样式，添加球员功能，添加球员必填项判断，添加完球员后能显示在表格内，已存在球员判重。
7.表格样式跟上图样式一致
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
/* tr:nth-child(even) 当前行的第 偶数 个元素 */
/* tr:nth-child(odd) 当前行的第 奇数 个元素 */
tbody tr:nth-child(odd) {
background-color: #DCDCDC;
}
tbody tr:nth-child(even){
background-color: #FFFFFF;
}
div{
font-size: 10px;
}
#input{
width: 250px;
}
select{
width: 250px;
}
#th{
text-align: left;
background-color: #999999;
}
#add{
width: 120px;
height: 30px;
border: 1px solid black ;
background-color: #33CCFF;
}
</style>
<Meta charset="UTF-8">
<title>AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息</title>
<script src="../jquery-2.1.0.js"></script>
<script src="../angular-1.5.5/angular.js"></script>
<script type="text/javascript">
$(function(){
//设置 tbody主题内容 奇数行背景色
$("tbody tr:odd").addClass("tr_odd");
//设置 tbody主题内容 偶数行背景色
$("tbody tr:even").addClass("tr_even");
});
</script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
// 1. 定义球员数据，进行页面的操作
$scope.balls = [
{
"name": "张三","where": "控球后卫","number": 11,"piao": 999
},{
"name": "李四","where": "大前锋","number": 21,"piao": 888
},{
"name": "王五","where": "小前锋","number": 23,"piao": 777
},{
"name": "赵六","where": "中锋","number": 10,"piao": 666
},{
"name": "周七","where": "得分后卫","number": 1,"piao": 555
},];
//定义根据票数排序的默认倒序标识符
$scope.order = "-piao";
//过滤敏感字符：枪 法轮功
$scope.search = "";
$scope.search2 = "";
//$watch():监测这个数据的值是否发生变化
$scope.$watch("search",function (value) {
if(value.indexOf("枪") != -1 || value.indexOf("法轮功") != -1){
alert("输入内容含有敏感字符！");
$scope.search = ""; //有敏感字符就弹出提示，之后变量search赋值为空，内容不查询
}else {
$scope.search2 = $scope.search;
}
});
// 2 .定义添加用户界面
//定义 添加球员 按钮的页面跳转方法：给按钮添加点击事件，使用AngularJS指令 ng-show ：点击按钮时显示添加页面，添加完后再隐藏页面
$scope.show = false;
$scope.add = function () {
$scope.show = true;
}
$scope.name = "";
$scope.where = "";
$scope.number = "";
$scope.piao = "";
//点击添加球员信息的按钮,验证非空情况后，再添加
$scope.sub = function () {
$scope.flag1 = false;
$scope.flag2 = false;
$scope.flag3 = false;
$scope.flag4 = false;
$scope.flag5 = false;
$scope.flag6 = false;
//a)姓名非空
if ($scope.name == null || $scope.name == ""){
alert("姓名不得为空！");
}else {
var flag = true;
//遍历对象数据姓名，有重复name就弹出提示，不添加，否则添加
for(index in $scope.balls){
if($scope.balls[index].name == $scope.name){
alert("球员添加重复！请重新填写数据");
flag = false;
$scope.flag1 = false;
}
}
if(flag){
$scope.flag1 = true;
}
}
//b)位置长度
if ($scope.where == null || $scope.where == ""){
alert("位置不能为空！");
}else {
$scope.flag2 = true;
}
//c)球号在1到60之间
if ($scope.number == "" || $scope.number == null){
alert("球号不能为空！");
}else if ($scope.number < 0 || $scope.number > 60 || $scope.number == 0 ){
alert("球号必须在1到60之间！");
}else {
$scope.flag3 = true;
}
//判断球号是否包含字母（汉字）
//定义正则表达式
var reg = /\D/;
if(reg.test($scope.number)) {
alert("球号不能含字母！");
}else {
$scope.flag4 = true;
}
//票数非空
if ($scope.piao == null || $scope.piao == ""){
alert("票数不得为空！");
}else {
$scope.flag5 = true;
}
//判断票数是否包含字母（汉字）
//定义正则表达式
var reg = /\D/;
if(reg.test($scope.piao)) {
alert("票数不能含字母！");
}else {
$scope.flag6 = true;
}
//符合条件后再提交添加
if($scope.flag1 == true && $scope.flag2 == true && $scope.flag3 == true && $scope.flag4 == true && $scope.flag5 == true && $scope.flag6 == true){
//添加成功后清空信息
var inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
inputs.item(i).value = "";
}
//number,piao变量 需转为number类型
var newBall = {
name:$scope.name,where:$scope.where,number:parseInt($scope.number),piao:parseInt($scope.piao)
}
//添加新用户
$scope.balls.push(newBall);
$scope.show = false;
}else {
return false;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
<div>
<span style="float:left;margin-left: 156px;">查询</span>
<span style="float:right;margin-right:388px;">排序</span>
</div> <br>
<div>
<input ng-model="search" placeholder="请输入球员信息" id="input" />
<!-- order 绑定的值由value值决定，piao，number表示正序，-piao，-number表示倒序 -->
<select ng-model="order">
<option value="-piao">票数倒序</option>
<option value="piao">票数正序</option>
<option value="-number">球号倒序</option>
<option value="number">球号正序</option>
</select>
</div>
</div> <br>
<button id="add" ng-click="add()">新增球员</button> <br> <br>
<table border="1" cellpadding="1" cellspacing="0" width="888">
<thead>
<tr id="th">
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
</thead>
<tbody>
<!-- 用ng-repaet指令将对象遍历并渲染到页面中 -->
<!-- filter指令实现模糊查询输入内容的功能。用户在输入框中键入信息的时候列表会动态显示符合要求的查询信息 -->
<!-- orderBy指令根据select标签下拉菜单中绑定的数据：ng-model="piaoTest" order的值进行正/倒序排序 -->
<tr ng-repeat="ballUser in balls | filter:search | orderBy:order ">
<td>{{ballUser.name}}</td>
<td>{{ballUser.where}}</td>
<td>{{ballUser.number}}</td>
<td>{{ballUser.piao}}</td>
</tr>
</tbody>
</table> <br> <br>
<!-- 新增球员页面 -->
<table border="1" cellspacing="0" cellpadding="18" ng-show="show">
<tr>
<th>姓名：</th>
<td><input ng-model="name" placeholder="请输入姓名"/></td>
</tr>
<tr>
<th>位置：</th>
<td><input ng-model="where" placeholder="请输入位置"/></td>
</tr>
<tr>
<th>球号：</th>
<td><input ng-model="number" placeholder="请输入球号"/></td>
</tr>
<tr>
<th>票数：</th>
<td><input ng-model="piao" placeholder="请输入票数"/></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="sub()" style="border: 1px solid black ; background-color: #33CCFF;">添加</button></td>
</tr>
</table>
</center>
</body>
</html> 原文链接：https://www.f2er.com/angularjs/145847.html