angularJS增刪改查，非空，年齡區間
阿新 • • 發佈：2019-01-03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycon",function($scope){
$scope.shuzu=[
{
name:"張飛",
pass:1234567,
age:19,
sex:"男",
state:focus
},
{
name:"關羽",
pass:123456734,
age:20,
sex:"男",
state:focus
},
{
name:"趙雲",
pass:1264567,
age:18,
sex:"男",
state:focus
},
]
//新增
$scope.jia=false;
$scope.add=function(){
var newname=$scope.x_name;
var newpass=$scope.x_pass;
//非空
$scope.errors=[];
if(newname=="" || newname==undefined){
$scope.errors.push("使用者名稱不能為空");
}
if(newpass=="" || newpass==undefined){
$scope.errors.push("密碼不能為空");
}
if($scope.errors.length==0){
var s={
name:newname,
pass:newpass,
age:$scope.x_age,
sex:$scope.x_sex,
}
$scope.shuzu.push(s);
$scope.jia=false;
}
}
//全選
$scope.quan=false;
$scope.xuan=function(){
if($scope.quan){
for(index in $scope.shuzu){
$scope.shuzu[index].state=true
}
}else{
for(index in $scope.shuzu){
$scope.shuzu[index].state=false
}
}
}
//批量刪除
$scope.pisan=function(){
if(confirm("確認刪除嗎")){
for(var i=0;i<$scope.shuzu.length;i++){
if($scope.shuzu[i].state==true){
$scope.shuzu.splice(i, 1);
i--;
}
}
}
}
//全刪
$scope.qsan=function(){
if(confirm("確認全部刪除嗎")){
for(var i=0;i<$scope.shuzu.length;i++){
$scope.shuzu.splice(i, 1);
i--;
}
}
}
//判斷年齡區間
$scope.ageSize=function(age){
if($scope.size=="" || $scope.size==undefined){
return true;
}else{
var a=$scope.size.split("-");
var min=a[0];
var max=a[1];
if(age>=min && age<=max){
return true;
}else{
return false;
}
}
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycon" >
<center>
姓名查詢<input type="text" ng-model="mohu"/>
年齡查詢<select ng-model="size">
<option value="">請選擇</option>
<option>1-10</option>
<option>10-20</option>
<option>20-30</option>
</select>
性別查詢<select ng-model="xing">
<option value="">-請選擇-</option>
<option value="男">--男--</option>
<option value="女">--女--</option>
</select>
<button ng-click="qsan()">刪除全部</button>
<button ng-click="pisan()">批量刪除</button><br><br>
<table cellpadding="15" cellspacing="0" border="1">
<thead>
<tr>
<th>全選<input type="checkbox" ng-click="xuan()" ng-model="quan"></th>
<th>序號</th>
<th>姓名</th>
<th>密碼</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="diao in shuzu | filter:{name:mohu} | filter:{sex:xing}" align="center" ng-if="ageSize(diao.age)">
<td><input type="checkbox" ng-model="diao.state"></td>
<td>{{$index}}</td>
<td>{{diao.name}}</td>
<td><span ng-hide="mikuan">{{diao.pass}}</span><span ng-show="mikuan"><input type="text" ng-model="diao.pass"><button ng-click="mikuan=false">儲存</button></span></td>
<td>{{diao.age}}</td>
<td>{{diao.sex}}</td>
<td><button ng-click="mikuan=true">修改密碼</button></td>
</tr>
</tbody>
</table>
<br>
<button ng-click="jia=true">新增使用者</button><br><br>
<table cellpadding="10" cellspacing="0" border="1" ng-show="jia">
<tr>
<td>姓名</td>
<td><input type="text" placeholder="請輸入姓名" ng-model="x_name"></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="text" placeholder="請輸入密碼" ng-model="x_pass"></td>
</tr>
<tr>
<td>年齡</td>
<td><input type="text" placeholder="請輸入年齡" ng-model="x_age"></td>
</tr>
<tr>
<td>性別</td>
<td><input type="text" placeholder="請輸入性別" ng-model="x_sex"></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="add()">提交</button></td>
</tr>
</table>
<p ng-show="errors.length!=0" ng-repeat="e in errors">{{e}}</p>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycon",function($scope){
$scope.shuzu=[
{
name:"張飛",
pass:1234567,
age:19,
sex:"男",
state:focus
},
{
name:"關羽",
pass:123456734,
age:20,
sex:"男",
state:focus
},
{
name:"趙雲",
pass:1264567,
age:18,
sex:"男",
state:focus
},
]
//新增
$scope.jia=false;
$scope.add=function(){
var newname=$scope.x_name;
var newpass=$scope.x_pass;
//非空
$scope.errors=[];
if(newname=="" || newname==undefined){
$scope.errors.push("使用者名稱不能為空");
}
if(newpass=="" || newpass==undefined){
$scope.errors.push("密碼不能為空");
}
if($scope.errors.length==0){
var s={
name:newname,
pass:newpass,
age:$scope.x_age,
sex:$scope.x_sex,
}
$scope.shuzu.push(s);
$scope.jia=false;
}
}
//全選
$scope.quan=false;
$scope.xuan=function(){
if($scope.quan){
for(index in $scope.shuzu){
$scope.shuzu[index].state=true
}
}else{
for(index in $scope.shuzu){
$scope.shuzu[index].state=false
}
}
}
//批量刪除
$scope.pisan=function(){
if(confirm("確認刪除嗎")){
for(var i=0;i<$scope.shuzu.length;i++){
if($scope.shuzu[i].state==true){
$scope.shuzu.splice(i, 1);
i--;
}
}
}
}
//全刪
$scope.qsan=function(){
if(confirm("確認全部刪除嗎")){
for(var i=0;i<$scope.shuzu.length;i++){
$scope.shuzu.splice(i, 1);
i--;
}
}
}
//判斷年齡區間
$scope.ageSize=function(age){
if($scope.size=="" || $scope.size==undefined){
return true;
}else{
var a=$scope.size.split("-");
var min=a[0];
var max=a[1];
if(age>=min && age<=max){
return true;
}else{
return false;
}
}
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycon" >
<center>
姓名查詢<input type="text" ng-model="mohu"/>
年齡查詢<select ng-model="size">
<option value="">請選擇</option>
<option>1-10</option>
<option>10-20</option>
<option>20-30</option>
</select>
性別查詢<select ng-model="xing">
<option value="">-請選擇-</option>
<option value="男">--男--</option>
<option value="女">--女--</option>
</select>
<button ng-click="qsan()">刪除全部</button>
<button ng-click="pisan()">批量刪除</button><br><br>
<table cellpadding="15" cellspacing="0" border="1">
<thead>
<tr>
<th>全選<input type="checkbox" ng-click="xuan()" ng-model="quan"></th>
<th>序號</th>
<th>姓名</th>
<th>密碼</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="diao in shuzu | filter:{name:mohu} | filter:{sex:xing}" align="center" ng-if="ageSize(diao.age)">
<td><input type="checkbox" ng-model="diao.state"></td>
<td>{{$index}}</td>
<td>{{diao.name}}</td>
<td><span ng-hide="mikuan">{{diao.pass}}</span><span ng-show="mikuan"><input type="text" ng-model="diao.pass"><button ng-click="mikuan=false">儲存</button></span></td>
<td>{{diao.age}}</td>
<td>{{diao.sex}}</td>
<td><button ng-click="mikuan=true">修改密碼</button></td>
</tr>
</tbody>
</table>
<br>
<button ng-click="jia=true">新增使用者</button><br><br>
<table cellpadding="10" cellspacing="0" border="1" ng-show="jia">
<tr>
<td>姓名</td>
<td><input type="text" placeholder="請輸入姓名" ng-model="x_name"></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="text" placeholder="請輸入密碼" ng-model="x_pass"></td>
</tr>
<tr>
<td>年齡</td>
<td><input type="text" placeholder="請輸入年齡" ng-model="x_age"></td>
</tr>
<tr>
<td>性別</td>
<td><input type="text" placeholder="請輸入性別" ng-model="x_sex"></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="add()">提交</button></td>
</tr>
</table>
<p ng-show="errors.length!=0" ng-repeat="e in errors">{{e}}</p>
</center>
</body>
</html>