<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table {
text-align: center;
border: 1px solid #000;
}
table tr:nth-child(odd) {
background-color: #787876;
}
button:hover {
cursor: pointer;
}
.mydiv {
margin: 0 auto;
width: 530px;
height: 500px;
}
fieldset {
width: 260px;
height: auto;
}
th {
width: 100px;
}
td {
width: 100px;
}
tbody tr:hover {
background-color: #99FF00;
}
</style>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("msApp", [])
app.controller("msCtrl", function ($scope, $filter) {
$scope.selects = ["请选择", "实现按照年龄倒序排序", "实现按照年龄正序排序"]
$scope.selchange = function () {
if ($scope.sel == $scope.selects[1]) {
$scope.title = "age"
$scope.desc = true
} else if ($scope.sel == $scope.selects[2]) {
$scope.title = "age"
$scope.desc = false
}
}
$scope.datasf = []
$scope.datas = [
{id: 0, name: "张三", age: 45, pingyin: "zhangsan", zhiwei: "总经理"},
{id: 1, name: "李四", age: 43, pingyin: "lisi", zhiwei: "设计师"},
{id: 2, name: "王五", age: 40, pingyin: "wangwu", zhiwei: "工程师"},
{id: 3, name: "赵六", age: 33, pingyin: "zhaoliu", zhiwei: "工程师"},
{id: 4, name: "周七", age: 32, pingyin: "zhouqi", zhiwei: "人事经理"},
]
$scope.save = function () {
if (!new RegExp("^[0-9]*$").exec($scope.addage)) {
alert("年龄格式错误")
return
} else {
$scope.datas.push({
id: $scope.datas.length,
name: $scope.addname,
age: parseInt($scope.addage),
pingyin: $scope.addpingyin,
zhiwei: $scope.addzhiwei
})
}
}
$scope.del = function (obj) {
var t = confirm("确定删除吗？")
if (t == true) {
for (var x = 0; x < $scope.datas.length; x++) {
if (obj.id == $scope.datas[x].id) {
$scope.datas.splice(x, 1);
}
}
}
}
$scope.datasf = $scope.datas
$scope.namefull = function () {
if ($scope.name == "") {
$scope.datasf = $scope.datas
}
}
$scope.namequery = function () {
if ($scope.name == undefined) {
alert("请输入名字查询")
}
if ($scope.name == "") {
alert("请输入名字查询")
$scope.datasf = $scope.datas
}
else {
if ($scope.name == "sx") {
alert("警告i--敏感词")
return
}
if ($scope.name.indexOf("sx") > 0) {
alert("警告i--敏感词")
return
}
var $f = $filter("filter")
$scope.datasf = $f($scope.datas, {"name": $scope.name})
if ($scope.datasf.length == 0) {
alert("未找到内容")
}
}
}
})
</script>
</head>
<body ng-app="msApp" ng-controller="msCtrl">
<div class="mydiv">
姓名查询条件<input type="text" ng-model="name" ng-change="namefull()">
<select ng-model="sel" ng-init="sel = selects[0]" ng-options="item for item in selects"
ng-change="selchange()" style="float: right"></select>
<br><br>
<table border="1px" align="center">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in datasf|orderBy:title:desc">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.pingyin}}</td>
<td>{{item.zhiwei}}</td>
<td>
<button ng-click="del(item)">删除</button>
</td>
</tr>
</table>
<button ng-click="namequery()" style="margin-left: 150px;margin-top: 30px">查询</button>
<button ng-click="isshow=!isshow" style="margin-left: 100px;margin-top: 30px">添加用户</button>
<form ng-show="isshow" style="margin-left: 240px">
<fieldset>
<legend>注册</legend>
<label>姓名:</label>
<input type="text" ng-model="addname"><br>
<label>年龄:</label>
<input type="text" ng-model="addage"><br>
<label>拼音:</label>
<input type="text" ng-model="addpingyin"><br>
<label>职位:</label>
<input type="text" ng-model="addzhiwei"><br>
<button ng-click="save()">保存</button>
</fieldset>
</form>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table {
text-align: center;
border: 1px solid #000;
}
table tr:nth-child(odd) {
background-color: #787876;
}
button:hover {
cursor: pointer;
}
.mydiv {
margin: 0 auto;
width: 530px;
height: 500px;
}
fieldset {
width: 260px;
height: auto;
}
th {
width: 100px;
}
td {
width: 100px;
}
tbody tr:hover {
background-color: #99FF00;
}
</style>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("msApp", [])
app.controller("msCtrl", function ($scope, $filter) {
$scope.selects = ["请选择", "实现按照年龄倒序排序", "实现按照年龄正序排序"]
$scope.selchange = function () {
if ($scope.sel == $scope.selects[1]) {
$scope.title = "age"
$scope.desc = true
} else if ($scope.sel == $scope.selects[2]) {
$scope.title = "age"
$scope.desc = false
}
}
$scope.datasf = []
$scope.datas = [
{id: 0, name: "张三", age: 45, pingyin: "zhangsan", zhiwei: "总经理"},
{id: 1, name: "李四", age: 43, pingyin: "lisi", zhiwei: "设计师"},
{id: 2, name: "王五", age: 40, pingyin: "wangwu", zhiwei: "工程师"},
{id: 3, name: "赵六", age: 33, pingyin: "zhaoliu", zhiwei: "工程师"},
{id: 4, name: "周七", age: 32, pingyin: "zhouqi", zhiwei: "人事经理"},
]
$scope.save = function () {
if (!new RegExp("^[0-9]*$").exec($scope.addage)) {
alert("年龄格式错误")
return
} else {
$scope.datas.push({
id: $scope.datas.length,
name: $scope.addname,
age: parseInt($scope.addage),
pingyin: $scope.addpingyin,
zhiwei: $scope.addzhiwei
})
}
}
$scope.del = function (obj) {
var t = confirm("确定删除吗？")
if (t == true) {
for (var x = 0; x < $scope.datas.length; x++) {
if (obj.id == $scope.datas[x].id) {
$scope.datas.splice(x, 1);
}
}
}
}
$scope.datasf = $scope.datas
$scope.namefull = function () {
if ($scope.name == "") {
$scope.datasf = $scope.datas
}
}
$scope.namequery = function () {
if ($scope.name == undefined) {
alert("请输入名字查询")
}
if ($scope.name == "") {
alert("请输入名字查询")
$scope.datasf = $scope.datas
}
else {
if ($scope.name == "sx") {
alert("警告i--敏感词")
return
}
if ($scope.name.indexOf("sx") > 0) {
alert("警告i--敏感词")
return
}
var $f = $filter("filter")
$scope.datasf = $f($scope.datas, {"name": $scope.name})
if ($scope.datasf.length == 0) {
alert("未找到内容")
}
}
}
})
</script>
</head>
<body ng-app="msApp" ng-controller="msCtrl">
<div class="mydiv">
姓名查询条件<input type="text" ng-model="name" ng-change="namefull()">
<select ng-model="sel" ng-init="sel = selects[0]" ng-options="item for item in selects"
ng-change="selchange()" style="float: right"></select>
<br><br>
<table border="1px" align="center">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in datasf|orderBy:title:desc">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.pingyin}}</td>
<td>{{item.zhiwei}}</td>
<td>
<button ng-click="del(item)">删除</button>
</td>
</tr>
</table>
<button ng-click="namequery()" style="margin-left: 150px;margin-top: 30px">查询</button>
<button ng-click="isshow=!isshow" style="margin-left: 100px;margin-top: 30px">添加用户</button>
<form ng-show="isshow" style="margin-left: 240px">
<fieldset>
<legend>注册</legend>
<label>姓名:</label>
<input type="text" ng-model="addname"><br>
<label>年龄:</label>
<input type="text" ng-model="addage"><br>
<label>拼音:</label>
<input type="text" ng-model="addpingyin"><br>
<label>职位:</label>
<input type="text" ng-model="addzhiwei"><br>
<button ng-click="save()">保存</button>
</fieldset>
</form>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
