Angular框架机构

最新推荐文章于 2025-07-01 19:52:01 发布

原创最新推荐文章于 2025-07-01 19:52:01 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

日常练习专栏收录该内容

14 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<style type="text/css">
#b{
font-family: "微软雅黑";
}
#t{
width: 400px;
text-align: center;
margin: 4px ;

}

</style>
</head>
<body id="b" ng-app="myApp" ng-controller="myCtrl">
查询：<input type="text" placeholder="输入姓名进行查询" id="fname" ng-keydown="find($event)" ng-model="cha"/>
排序：<select id="sel" ng-click="paixu()">
<option></option>
<option>正序</option>
<option>倒序</option>
</select>
<input type="button" id="zs" value="添加到数据库" ng-click="show()"/><br /><br />
<input type="button" id="all" ng-click="all()" value="全选"/>
<input type="button" id="fan" ng-click="some()" value="反选"/>
<input type="button" value="批量删除" id="del"ng-click="delsome()"/>
<table id="t" border="1px" cellpadding="0px" cellspacing="0px" class="table-striped table-hover">
<tr style="background: darkgray;">
<td>括选</td>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
<td>时间</td>
<td>操作</td>
</tr>
<tr ng-repeat="p in persons|filter:cha">
<td><input type="checkbox" id="check"></td>
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.address}}</td>
<td>{{p.time}}</td>
<td><a href="#">删除</a></td>
</tr>
</table>
<div id="qd">
<h1>添加用户</h1>
姓名：    <input type="text" id="name"/><br>
年龄：    <input type="text" id="age"/><br>
地址：    <input type="text" id="address"/><br>
<br />
<input type="button" value="添加用户" id="add" ng-click="add()"/>

</div>
<script type="text/javascript">
var mo = angular.module("myApp",[]);
//开始隐藏
$("#qd").hide();
//初始化
mo.controller("myCtrl",function($scope) {
$scope.persons = [{
"name":"柳如是",
"age":16,
"address":"怡红院",
"time": "2017-05-11 8:32:22"
},{
"name":"杜十娘",
"age":30,
"address":"望春楼",
"time": "2017-05-11 8:32:22"
},{
"name":"赵飞燕",
"age":24,
"address":"闻香阁",
"time": "2017-05-11 8:32:22"
},{
"name":"赵飞燕",
"age":24,
"address":"闻香阁",
"time": "2017-05-11 8:32:22"
}];
//点击显示添加界面
$scope.show = function() {
$("#qd").show(1000);
}
//全选
var ifcheck = false;
$scope.all = function() {
var allcheck = $("input[type=checkbox]");
if(ifcheck==false){
for (var i = 0;i<allcheck.length;i++) {
var already = allcheck[i];
already.checked = true;
}
ifcheck = true;
return;
}else{
for (var i = 0;i<allcheck.length;i++) {
var already = allcheck[i];
already.checked = false;
}
ifcheck = false;

}
}
//反选
$scope.some = function() {
var somecheck = $("input[type = checkbox]");
for (var s = 0;s<somecheck.length;s++) {
var someone = somecheck[s];
someone.checked = !someone.checked;
}
}
//批量删除
$scope.delsome = function(){
var dels = $("input[type = checkbox]:checked");
for (var i = 0;i < dels.length; i++) {
var delsomeone = dels[i];
delsomeone.parentNode.parentNode.remove();
}
}
//排序
$scope.paixu = function() {
var sel = $("#sel option:selected").text();
if (sel == "正序") {
$scope.persons.sort(function(a,b) {
if(a.age>b.age){
return 1;
}else{
return -1;
}

return 0;
});
} else if(sel == "倒序"){
$scope.persons.sort(function(a,b) {
if(a.age>b.age){
return -1;
}else{
return 1;
}

return 0;
});
}

}
//查询，模糊查询
$scope.find = function($event){
var newname = $("#fname").val();

var key = $event.keyCode;

if(key == 13){
var newpersons =[];
for (var i = 0 ; i<$scope.persons.length;i++) {
if (newname == $scope.persons[i].name) {
newpersons.push($scope.persons[i]);
}
}
$scope.persons = newpersons;
};
};
//添加
$scope.add = function(){
var name = $("#name").val();
var age = $("#age").val();
var address = $("#address").val();
//时间
var data = new Date();

var nian = data.getFullYear();
var month = data.getMonth()+1;
var day = data.getDay();
var hour = data.getHours();
var minute = data.getMinutes();
var second = data.getSeconds();
var shi = nian+"-"+month+"-"+day+"-"+hour+"-"+minute+"-"+second;
var newperson ={
"name":name,
"age":age,
"address":address,
"time":shi
}
if(name == ""){
alert("姓名不能为空！");
}else if(isNaN(age)==true){
alert("年龄格式错误");
}
else{
$scope.persons.push(newperson);
$("#qd").hide(500);
}

}

});
</script>
</body>
</html>