直接来一个简单的案例
如下图:
技术要求:
-
实现图中所有元素(页面规整)。
- 实现文案效果(按效果显示)。
- 实现查询功能,并且判断敏感词。查询后列表变化。
- 实现倒序和正序排序,排序列表可以下拉。
- 实现添加球员,判断所添加的球员,如已存在则不添加,如不存在则显示在表格内。
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.mm1{
margin-left: 250px;
}
.mm2{
margin-top: 20px;
}
.mm{
margin-left: 165px;
}
.content{
margin-top: 20px;
margin-left: 250px;
display: flex;
flex-direction: row;
}
.left{
flex: 1;
}
.right{
flex: 1;
}
.left input{
width: 500px;
height: 30px;
}
.right select{
width: 500px;
height: 30px;
}
table{
margin-top: 20px;
width: 1220px;
margin-left: 310px;
}
#add{
margin-top: 20px;
margin-left: 250px;
background: #33CCFF;
border-radius: 4px;
width: 80px;
height: 30px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="mm2">
<span class="mm1">姓名:<input type="text" id="name" /></span>
<span class="mm">位置:<input type="text" id="weizhi" /></span>
<span class="mm">球号:<input type="text" id="qiuhao" /></span>
<span class="mm">票数:<input type="text" id="piaoshu" /></span>
</div>
<br />
<div class="content">
<div class="left">
<span>
查询
</span>
<br />
<input type="text" ng-keydown="cha($event)" id="chaName" />
</div>
<div class="right">
<span>
排序
</span>
<br />
<select ng-model="xuanxiang" ng-options="x for x in names" ng-init="xuanxiang = names[0]" ng-change="change()"></select>
</div>
</div>
<input type="button" id="add" value="添加球员" ng-click="add()" class="button-dark" />
<table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped">
<tr style="background: #999999;">
<td align="center">姓名</td>
<td align="center">位置</td>
<td align="center">球号</td>
<td align="center">票数</td>
</tr>
<tr ng-repeat="p in persons">
<td align="center">{{p.name|myFilter}}</td>
<td align="center">{{p.weizhi}}</td>
<td align="center">{{p.qiuhao}}</td>
<td align="center">{{p.piaoshu}}</td>
</tr>
</table>
<script type="text/javascript">
//创建模型
var mo = angular.module("myApp",[]);
//定义过滤器,过滤敏感词 比如:马--*
mo.filter("myFilter",function(){//参数1:过滤器的名字,参数2.方法
return function(input){//input---要过滤的数据
var newInput = input.replace(/马/g,"*");//参数1:正则,要替换的内容 参数2:新的内容
return newInput;
}
});
//创建控制器
mo.controller("myCtrl",function($scope){
//下拉框显示的数据
$scope.names = ["升序","降序"];
//初始化数据
$scope.persons = [{
"name":"梅西",
"weizhi":"前锋",
"qiuhao":10,
"piaoshu":100
},{
"name":"内马尔",
"weizhi":"前锋",
"qiuhao":11,
"piaoshu":80
},{
"name":"贝克汉姆",
"weizhi":"前锋",
"qiuhao":10,
"piaoshu":90
}];
//添加
$scope.add = function(){
//取得用户输入的数据
var name = $("#name").val();
var weizhi = $("#weizhi").val();
var qiuhao = $("#qiuhao").val();
var piaoshu = $("#piaoshu").val();
//判断用户输入的信息
if (name == "") {
//弹窗提醒
alert("姓名不能为空");
return;
}
//验证用户输入的信息是否与表格中的信息重复
for (var i = 0;i<$scope.persons.length;i++) {
var p0 = $scope.persons[i];
var pname = p0.name;
//判断是否重复
if (pname==name) {
//弹框提醒
alert("输入姓名重复");
return;
}
}
//如果输入信息无误,则添加
var newPerson = {
"name":name,
"weizhi":weizhi,
"qiuhao":qiuhao,
"piaoshu":piaoshu
};
//替换
$scope.persons.push(newPerson);
}
//排序
$scope.change = function(){
var xx = $scope.xuanxiang;
//判断用户所选择的排序方式
if (xx == "升序") {//升序
$scope.persons.sort(function(a,b){
if (a.piaoshu<b.piaoshu) {
return-1;
}else if (a.piaoshu>b.piaoshu) {
return 1;
}
return 0;
});
}else{//降序
$scope.persons.sort(function(a,b){
if (a.piaoshu<b.piaoshu) {
return 1;
}else if (a.piaoshu>b.piaoshu) {
return -1;
}
return 0;
});
}
}
//查询事件
$scope.cha = function($event){
var key = $event.keyCode;
//判断键盘事件
if(key==13){
//获取用户输入的信息
var name1 = $("#chaName").val();
//创建一个新的数组
var newPersons = [];
for (var i=0;i<$scope.persons.length;i++) {
if(name1==$scope.persons[i].name){
newPersons.push($scope.persons[i]);
}
}
//将数据替换
$scope.persons = newPersons;
}
}
});
</script>
</body>
</html>