angularjs表格的增刪改查完成功能
阿新 • • 發佈：2019-01-05
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.gehang:nth-child(even){
background-color: blueviolet;
}
</style>
<script src="js/angular.min.js"></script>
angular.module("myapp",[])
.controller("democ",function($scope,$filter){
$scope.datas=[{
name:"張三",
age:"45",
piny:"zhangsan",
zhiwei:"總經理",
},{
name:"李四",
age:"43",
piny:"lisi",
zhiwei:"設計師",
},{
name:"王五",
age:"40",
piny:"wangwu",
zhiwei:"工程師",
}];
//刪除
$scope.shan=function(i){
if(confirm("是否刪除")){
$scope.datas.splice(i,1);
confirm("刪除成功")
}
}
//點選新增顯示出來
$scope.addAll=function(){
$scope.isshow=true;
}
$scope.name="";
$scope.age="";
$scope.piny="";
$scope.zhiwei="";
$scope.chAll=function(v1,v2,v3,v4){
if(parseInt(v2)==v2){
$scope.datas.push({
name:$scope.name,
age:$scope.age,
piny:$scope.piny,
zhiwei:$scope.zhiwei,
});
$scope.isshow=false;
}else{
alert("年齡格式錯誤")
}
}
//查詢，判斷敏感詞
$scope.a="";
$scope.cha=function(){
if($scope.a==""||$scope.a==null){
alert("請輸入姓名")
}else{
if($scope.a.match("雞")){
alert("內容有敏感詞")
}else{
var f=$filter("filter");
var shu=f($scope.datas,{name:$scope.a});
if(shu.length==0){
alert("未找到內容")
}else{
$scope.datas=shu;
}
}
}
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="democ">
姓名查詢條件:<input ng-model="a" />
<select style="margin-left: 60px;">
<option >按年齡排序</option>
<option>45</option>
<option>43</option>
<option>40</option>
</select>
<table border="1" style="width: 500px; height: 50px;">
<tr style="background-color: darkgrey;">
<th >姓名</th>
<th ng-click="title='age';desc=!desc">年齡</th>
<th>拼音</th>
<th>職位</th>
<th>操作</th>
</tr>
<tr ng-repeat="dat in datas|orderBy:title:desc" class="gehang">
<td>{{dat.name}}</td>
<td>{{dat.age}}</td>
<td>{{dat.piny}}</td>
<td>{{dat.zhiwei}}</td>
<td><span style="cursor:pointer;" ng-click="shan($index)">刪除</span></td>
</tr>
</table>
<button ng-click="cha()">查詢</button>
<button ng-click="addAll()">新增使用者</button>
<form ng-show="isshow">
姓名:<input ng-model="name" /><br />
年齡:<input ng-model="age" /><br />
拼音: <input ng-model="piny" /><br />
職位:<input ng-model="zhiwei" /><br />
<button style="margin-left: 60px;" ng-click="chAll(name,age,piny,zhiwei)">儲存</button>
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.gehang:nth-child(even){
background-color: blueviolet;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-2.1.0.js"></script>
//滑鼠停止改變顏色
<script>
$(function(){
$("tr").mouseenter(function(){
$(this).css("background-color","yellow").siblings().css("background-color","");
});
$("table").mouseleave(function(){
$(this).children("tbody").eq(0).children("tr").css("background-color","");
})
});
</script>
angular.module("myapp",[])
.controller("democ",function($scope,$filter){
$scope.datas=[{
name:"張三",
age:"45",
piny:"zhangsan",
zhiwei:"總經理",
},{
name:"李四",
age:"43",
piny:"lisi",
zhiwei:"設計師",
},{
name:"王五",
age:"40",
piny:"wangwu",
zhiwei:"工程師",
}];
//刪除
$scope.shan=function(i){
if(confirm("是否刪除")){
$scope.datas.splice(i,1);
confirm("刪除成功")
}
}
//點選新增顯示出來
$scope.addAll=function(){
$scope.isshow=true;
}
$scope.name="";
$scope.age="";
$scope.piny="";
$scope.zhiwei="";
$scope.chAll=function(v1,v2,v3,v4){
if(parseInt(v2)==v2){
$scope.datas.push({
name:$scope.name,
age:$scope.age,
piny:$scope.piny,
zhiwei:$scope.zhiwei,
});
$scope.isshow=false;
}else{
alert("年齡格式錯誤")
}
}
//查詢，判斷敏感詞
$scope.a="";
$scope.cha=function(){
if($scope.a==""||$scope.a==null){
alert("請輸入姓名")
}else{
if($scope.a.match("雞")){
alert("內容有敏感詞")
}else{
var f=$filter("filter");
var shu=f($scope.datas,{name:$scope.a});
if(shu.length==0){
alert("未找到內容")
}else{
$scope.datas=shu;
}
}
}
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="democ">
姓名查詢條件:<input ng-model="a" />
<select style="margin-left: 60px;">
<option >按年齡排序</option>
<option>45</option>
<option>43</option>
<option>40</option>
</select>
<table border="1" style="width: 500px; height: 50px;">
<tr style="background-color: darkgrey;">
<th >姓名</th>
<th ng-click="title='age';desc=!desc">年齡</th>
<th>拼音</th>
<th>職位</th>
<th>操作</th>
</tr>
<tr ng-repeat="dat in datas|orderBy:title:desc" class="gehang">
<td>{{dat.name}}</td>
<td>{{dat.age}}</td>
<td>{{dat.piny}}</td>
<td>{{dat.zhiwei}}</td>
<td><span style="cursor:pointer;" ng-click="shan($index)">刪除</span></td>
</tr>
</table>
<button ng-click="cha()">查詢</button>
<button ng-click="addAll()">新增使用者</button>
<form ng-show="isshow">
姓名:<input ng-model="name" /><br />
年齡:<input ng-model="age" /><br />
拼音: <input ng-model="piny" /><br />
職位:<input ng-model="zhiwei" /><br />
<button style="margin-left: 60px;" ng-click="chAll(name,age,piny,zhiwei)">儲存</button>
</form>
</body>
</html>