<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
text-align: center;
}
table {
border-collapse: collapse;
margin: 20px auto;
}
th,
td {
padding: 10px;
border: 1px solid #000;
}
</style>
<!--<script src="angular.min.js"></script>-->
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var myapp = angular.module("myapp", []);
myapp.controller("myCtrl", function($scope) {
$scope.data = [{
id: 1,
name: "張三",
pas: "123",
age: "23",
sex: "男",
check: false
}, {
id: 2,
name: "李四",
pas: "345",
age: "20",
sex: "女",
check: false
}];
//按照年齡查找
$scope.ageSize = "--請輸選擇--";
$scope.ageFun = function(item) {
//return false;
if($scope.ageSize != "--請輸選擇--") {
var arr = $scope.ageSize.split("-");
var min = arr[0];
var max = arr[1];
if(item.age > max || item.age < min) {
return false;
} else {
return true;
}
} else {
return true;
}
};
//按照性別查找
$scope.sex = "--請輸選擇--";
$scope.sexFun = function(item) {
if($scope.sex != "--請輸選擇--") {
if(item.sex == $scope.sex) {
return true;
} else {
return false;
}
} else {
return true;
}
};
//刪除全部
$scope.delAll = function() {
$scope.data.length = 0;
};
//全選
$scope.checkBtn = false;
$scope.checkAll = function() {
console.log($scope.checkBtn);
if($scope.checkBtn == true) {
for(var i = 0; i < $scope.data.length; i++) {
$scope.data[i].check = true;
}
} else {
for(var i = 0; i < $scope.data.length; i++) {
$scope.data[i].check = false;
}
}
}
//計數功能
var n = 0;
$scope.fx = function(index) {
//console.log(index);
if($scope.data[index].check == true) {
n++;
} else {
n--;
}
console.log(n);
if(n == $scope.data.length) {
$scope.checkBtn = true;
} else {
$scope.checkBtn = false;
}
};
//批量刪除
$scope.del = function() {
for(var i = 0; i < $scope.data.length; i++) {
if($scope.data[i].check == true) {
$scope.data.splice(i, 1);
i--;
}
}
};
//添加功能
$scope.show = false;
$scope.addUser = function() {
$scope.show = true;
}
$scope.tj = function() {
if($scope.nameNext == "" || $scope.nameNext == null) {
alert("姓名")
} else if($scope.correct == true) {
$scope.data[$scope.index].pas = $scope.pasNext;
} else {
$scope.data.push({
name: $scope.nameNext,
pas: $scope.pasNext,
age: $scope.ageNext,
sex: $scope.sexNext,
check: false
})
}
$scope.show = false;
};
$scope.correct = function(index) {
console.log(index);
$scope.show = true;
$scope.nameNext = $scope.data[index].name;
$scope.pasNext = $scope.data[index].pas;
$scope.correct = true;
//記錄索引
$scope.index = index;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<span>姓名查找</span>
<input type="text" placeholder="請輸入姓名" ng-model="search">
<span>年齡查找</span>
<select ng-model="ageSize">
<option>--請輸選擇--</option>
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
<option>40-50</option>
</select>
<span>性別查找</span>
<select ng-model="sex">
<option>--請輸選擇--</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="delAll()">刪除全部</button>
<button ng-click="del()">批量刪除</button>
<table>
<thead>
<tr>
<th>全選<input type="checkbox" ng-model="checkBtn" ng-click="checkAll()"></th>
<th>序號</th>
<th>姓名</th>
<th>密碼</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data|filter:{name:search}|filter:ageFun|filter:sexFun">
<td><input type="checkbox" ng-model="item.check" ng-click="fx($index)"></td>
<td>{{$index}}</td>
<td>{{item.name}}</td>
<td>{{item.pas}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button ng-click="correct($index)">修改密碼</button></td>
</tr>
</tbody>
</table>
<button ng-click="addUser()">添加用戶</button>
<table ng-show="show">
<tbody>
<tr>
<td>姓名</td>
<td><input type="text" ng-model="nameNext" placeholder="請輸入姓名"></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="text" ng-model="pasNext" placeholder="請輸入密碼"></td>
</tr>
<tr>
<td>年齡</td>
<td><input type="number" ng-model="ageNext" placeholder="請輸入年齡"></td>
</tr>
<tr>
<td>性別</td>
<td><input type="text" ng-model="sexNext" placeholder="請輸入性別"></td>
</tr>
<tr>
<td colspan="2"><button ng-click="tj()">提交</button></td>
</tr>
<!--<tr>
<td>密碼確認</td>
<td><input type="text" ng-model="pasNext2"></td>
</tr>-->
</tbody>
</table>
</body>
</html>
增刪改查
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章