<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>周考3练习</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">
.content {
margin-top: 20px;
display: flex;
flex-direction: row;
}
.left {
flex: 1;
}
.right {
flex: 1;
}
.left input {
width: 400px;
}
.right select {
width: 400px;
}
table {
margin-top: 20px;
width: 900px;
}
#add {
margin-top: 20px;
background: #33CCFF;
border-radius: 5px;
width: 80px;
height: 30px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
姓名:<input type="text" id="name" />
位置:<input type="text" id="weizhi" />
球号:<input type="text" id="qiuhao" />
票数:<input type="text" id="piaoshu" /><br>
<div class="content">
<div class="left">
<span>
查询
</span><br>
<!--
查询输入框
-->
<input type="text" ng-model="key" placeholder="请输入查询姓名关键字" 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 class="button-dark" type="button" id="add" value="添加球员" ng-click="add()" />
<table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped">
<tr style="background: #999999;" ng-class="{{bold}}">
<td>姓名</td>
<td>位置</td>
<td>球号</td>
<td>票数</td>
</tr>
<tr ng-repeat="p in data | filter: {name:key} |orderBy:data.predicate">
<td>{{p.name | myFilter}}</td>
<td>{{p.sex}}</td>
<td>{{p.age}}</td>
<td>{{p.score}}</td>
</tr>
</table>
</body>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.bold = "bold";
$scope.key = '';
$scope.data = [
{ name: "张明明", sex: "控制后卫", age: 11, score: 975},
{ name: "沥青四", sex: "大前锋", age: 21, score: 365},
{ name: "刘晓华", sex: "小前锋", age: 23, score: 999},
{ name: "陈仲忠", sex: "中锋", age: 10, score: 888}
];
$scope.names =["升序","降序"];
$scope.change= function(){
var xz = $scope.xuanxiang;
if(xz=="升序"){
$scope.data.predicate='score';
}else{
$scope.data.predicate='-score';
}
}
$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.data.length ; i++) {
var p = $scope.data[i];
var pname = p.name;
if(name==pname){
alert("名字重复");
return;
}
}
var newData={
"name":name,
"sex":weizhi,
"age":qiuhao,
"score":piaoshu
};
$scope.data.push(newData);
}
});
app.filter("myFilter",function(){
return function(input){//input 就是要过滤的数据
var newInput = input.replace(/明/g,"*");//参数1:正则,要替换的内容 参数2:新的内容
return newInput;
}
});//参数1:过滤器的名字,参数2.方法
</script>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>周考3练习</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">
.content {
margin-top: 20px;
display: flex;
flex-direction: row;
}
.left {
flex: 1;
}
.right {
flex: 1;
}
.left input {
width: 400px;
}
.right select {
width: 400px;
}
table {
margin-top: 20px;
width: 900px;
}
#add {
margin-top: 20px;
background: #33CCFF;
border-radius: 5px;
width: 80px;
height: 30px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
姓名:<input type="text" id="name" />
位置:<input type="text" id="weizhi" />
球号:<input type="text" id="qiuhao" />
票数:<input type="text" id="piaoshu" /><br>
<div class="content">
<div class="left">
<span>
查询
</span><br>
<!--
查询输入框
-->
<input type="text" ng-model="key" placeholder="请输入查询姓名关键字" 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 class="button-dark" type="button" id="add" value="添加球员" ng-click="add()" />
<table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped">
<tr style="background: #999999;" ng-class="{{bold}}">
<td>姓名</td>
<td>位置</td>
<td>球号</td>
<td>票数</td>
</tr>
<tr ng-repeat="p in data | filter: {name:key} |orderBy:data.predicate">
<td>{{p.name | myFilter}}</td>
<td>{{p.sex}}</td>
<td>{{p.age}}</td>
<td>{{p.score}}</td>
</tr>
</table>
</body>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.bold = "bold";
$scope.key = '';
$scope.data = [
{ name: "张明明", sex: "控制后卫", age: 11, score: 975},
{ name: "沥青四", sex: "大前锋", age: 21, score: 365},
{ name: "刘晓华", sex: "小前锋", age: 23, score: 999},
{ name: "陈仲忠", sex: "中锋", age: 10, score: 888}
];
$scope.names =["升序","降序"];
$scope.change= function(){
var xz = $scope.xuanxiang;
if(xz=="升序"){
$scope.data.predicate='score';
}else{
$scope.data.predicate='-score';
}
}
$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.data.length ; i++) {
var p = $scope.data[i];
var pname = p.name;
if(name==pname){
alert("名字重复");
return;
}
}
var newData={
"name":name,
"sex":weizhi,
"age":qiuhao,
"score":piaoshu
};
$scope.data.push(newData);
}
});
app.filter("myFilter",function(){
return function(input){//input 就是要过滤的数据
var newInput = input.replace(/明/g,"*");//参数1:正则,要替换的内容 参数2:新的内容
return newInput;
}
});//参数1:过滤器的名字,参数2.方法
</script>
</html>