angular实现排序,添加,查询
2017-10-24 09:09
471 查看
一.要求
1.实现上图页面所有元素5分，页面布局规整加5分，跟上图效果一致5分
2.实现文案显示5分，按效果显示5分
3.实现查询5分，实现查询敏感词过滤5分，实现查询后列表变化5分
4.实现倒序5分，实现正序5分，下拉列表排序效果都实现5分
5.按钮背景一致5分，按钮样式5分
6.实现添加球员页面5分，添加球员页面样式5分，添加球员功能5分，添加球员必填项判断5分，添加完球员后能显示在表格内5分，已存在球员判重5分。
7.表格样式跟上图样式一致5分。
二.实现的代码
1.实现上图页面所有元素5分，页面布局规整加5分，跟上图效果一致5分
2.实现文案显示5分，按效果显示5分
3.实现查询5分，实现查询敏感词过滤5分，实现查询后列表变化5分
4.实现倒序5分，实现正序5分，下拉列表排序效果都实现5分
5.按钮背景一致5分，按钮样式5分
6.实现添加球员页面5分，添加球员页面样式5分，添加球员功能5分，添加球员必填项判断5分，添加完球员后能显示在表格内5分，已存在球员判重5分。
7.表格样式跟上图样式一致5分。
二.实现的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="angular-1.3.0.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<script>
var app=angular.module("myApp",["ngRoute"]);
var user=[
{
"name":"张三",
"position":"控球后卫",
"ball":11,
"num":999
},
{
"name":"李四",
"position":"大前锋",
"ball":21,
"num":888
},
{
"name":"王五",
"position":"小前锋",
"ball":23,
"num":777
},
{
"name":"赵六",
"position":"中锋",
"ball":10,
"num":666
},
{
"name":"周七",
"position":"得分后卫",
"ball":1,
"num":555
}
];
app.value("user",user);
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/addUser",{
controller:"myCtrl",
templateUrl:"addUser.html"
})
.otherwise({redirectTo:"/addUser"});
}]);
app.controller("myCtrl",function($scope,user,$location){
//先拿到数组
$scope.user=user;
$scope.searchName = function(){
if($scope.queryname == "八维"){
alert("敏感字符,禁止输入");
}
}
//定义页面跳转方法
$scope.goToUrl=function(path){
$location.path(path);
};
//添加用户信息
$scope.add=function(){
var newuser=
{
name:$scope.name,
position:$scope.position,
ball:$scope.ball,
num:$scope.num
};
var flag = true;
for(var i=0;i<$scope.user.length;i++) {
if($scope.user[i].name==$scope.name){
flag=false;
}
}
if(flag){
$scope.user.push(newuser);
}else{
alert("添加的姓名已存在");
}
};
//记录排序的状态
$scope.order = function () {
if ($scope.search_piao_shu_value == 1) {
$scope.user.sort(function (json1, json2) {
return (json1.num < json2.num) ? 1 : -1;
});
} else if ($scope.search_piao_shu_value == 2) {
$scope.user.sort(function (json1, json2) {
return (json1.num > json2.num) ? 1 : -1;
});
}
};
});
</script>
<title></title>
<style>
.t{
width: 600px;
height: 300px;
margin: 30px 10px;
}
.add{
background-color: #4bdaff;
width: 100px;
height: 50px;
font-size: 20px;
margin-left: -500px;
margin-top: 20px;
margin-bottom: 10px;
}
.t2{
width: 300px;
height: 200px;
text-align: center;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<table style="width: 600px;height: 30px;text-align: left">
<tr>
<td>
查询<br/><input type="text" placeholder="用户名查询" ng-model="queryname" ng-change="searchName()" style="width: 210px"/>
<td>
排序:<select ng-model="search_piao_shu_value" ng-change="order()">
<option value="0">排序</option>
<option value="1">票数正序</option>
<option value="2">票数倒序</option>
</select><br/>
</td>
</tr>
</table>
<div><button ng-click="goToUrl('/addUser')" class="add">添加用户</button></div>
<script type="text/ng-template" id="addUser.html">
<form action="#">
<table border="1" cellspacing="0" cellpadding="0" class="t2">
<tr>
<td>姓名：</td>
<td><input type="text" placeholder="请输入姓名" ng-model="name"/></td>
</tr>
<tr>
<td>位置：</td>
<td><input type="text" placeholder="请输入位置" ng-model="position"/></td>
</tr>
<tr>
<td>球号：</td>
<td><input type="text" placeholder="请输入球号" ng-model="ball"/></td>
</tr>
<tr>
<td>票数：</td>
<td><input type="text" placeholder="请输入票数" ng-model="num"/></td>
</tr>
<tr>
<td colspan="2" align="center"><button ng-click="add()">提交</button></td>
</tr>
</table>
</form>
</script>
<div>
<table cellspacing="0" cellpadding="0" border="1" class="t">
<tr>
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
<tr ng-repeat="x in user|filter:{'name':queryname}|filter:{'num':num}|orderBy: piao_shu">
<td>{{x.name}}</td>
<td>{{x.position}}</td>
<td>{{x.ball}}</td>
<td>{{x.num}}</td>
</tr>
</table>
</div>
<div ng-view>
</div>
</center>
</body>
</html>2.另一种方法(判断敏感字符)<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script type="text/javascript" src="js/angular-1.3.0.js"></script>
<script type="text/javascript" src="js/jquery.1.12.4.js"></script>
<style>
th{
padding: 0 60px;
}
.top{
background: #999999;
}
</style>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.data = [
{
name:"张三",
wz:"控球后卫",
id:11,
num:999
},
{
name:"李四"
b2f2
,
wz:"大前锋",
id:21,
num:888
},
{
name:"赵六",
wz:"中锋",
id:10,
num:666
},
{
name:"王五",
wz:"小前锋",
id:11,
num:777
},
{
name:"周七",
wz:"得分后卫",
id:1,
num:555
},
];
var date = $scope.data;
$scope.searchName = function(){
$scope.data = [];
if($scope.cn == "八维"){
alert("敏感字符,禁止输入");
$scope.cn = "";
}else{
for(var i in date){
if($scope.cn == date[i].name){
$scope.data.push(date[i]);
}
}
}
if($scope.cn ==""){
$scope.data = date;
}
}
var flags = "num";
$scope.order = function(){
var options=$("#test option:selected");
if(options.val() == "票数正序"){
var flags = "num";
$scope.flags = flags;
}
if(options.val() == "票数倒序") {
var flags = "-num";
$scope.flags = flags;
}
}
$scope.addUser = function () {
$scope.addUserIsShow = true;
};
$scope.add = function () {
flag = true;
for(var i in date){
if(date[i].name == $scope.name){
flag = false;
}
}
flag2 = true;
for(var i in date){
if("八维" == $scope.name){
flag2 = false;
}
}
if(flag){
if(flag2){
$scope.data.push({
name: $scope.name,
wz: $scope.password,
id: $scope.age,
num: $scope.sex
});
}else{
alert("敏感字符,不得添加");
}
}else{
alert("已存在,不能添加");
}
$scope.name = "";
$scope.password = "";
$scope.age = "";
$scope.sex = "";
$scope.addUserIsShow = false;
};
});
</script>
</head>
<body ng-controller="myCtrl">
<div style="width: 75%;height: 800px; border: 1px solid; margin: 0 auto" >
<div style="float: left;margin-left: 80px;width: 50px">
<p>查询</p>
<input type="text" ng-model="cn" placeholder="敏感字符为八维" ng-change="searchName()" >
<button style="width: 150px;height: 40px;margin-top: 20px;
font-size: 16px;background-color: #33ccff" ng-click="addUser()">新增球员</button>
</div>
<div style="float: right;margin-right: 100px;margin-bottom: 100px">
<p>排序</p>
<select id="test" ng-blur="order()">
<option>票数倒序</option>
<option>票数正序</option>
</select>
</div>
<div style="float: none"></div>
<div>
<table style="float: left;margin-left: 80px" border="1" cellspacing="0" >
<tr class="top">
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
<tr ng-repeat="person in data | orderBy: flags" class="all">
<td>{{person.name}}</td>
<td>{{person.wz}}</td>
<td>{{person.id}}</td>
<td>{{person.num}}</td>
</tr>
</table>
</div>
<div ng-show="addUserIsShow">
<table border="1" style="float:left;margin-left:270px;margin-top: 20px">
<tr>
<td>
姓名：
</td>
<td>
<input type="text" ng-model="name"/>
</td>
</tr>
<tr>
<td>
位置：
</td>
<td>
<input type="text" ng-model="password"/>
</td>
</tr>
<tr>
<td>
球号：
</td>
<td>
<input type="text" ng-model="age"/>
</td>
</tr>
<tr>
<td>
票数：
</td>
<td>
<input type="text" ng-model="sex"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button ng-click="add()">提交</button>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- angular实现添加,删除,查询,排序
- angular的查询添加排序
- c语言版通讯录 实现联系人信息的添加，删除，修改，排序，保存，查询
- js实现查询 添加 排序功能
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除 之代码规范
- 综合——用Angular和js实现排序查询操作
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除、导出、突出显示等常见应用实现
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除 之代码规范
- Angular,添加,删除,查询,排序
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除 之代码规范
- gridview 实现自定义分页、排序、查询、添加、编辑、多选删除 之代码规范
- angular表格的查询添加和排序
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除 之代码规范
- Angular用户查询，按条件排序，批量删除，添加，敏感字屏蔽
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除、导出、突出显示等常见应用实现
- AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
- AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- angular jQuery css html混合table表格查询 排序 添加 删除 隔行换色
- Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除、导出、突出显示等常见应用实现(cs)