<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Angularjs的增刪改查，排序，查詢年齡範圍</title>
<script type="text/javascript" src="../Anglert/angular.js" ></script>
<script type="text/javascript">
//注入模塊
var app = angular.module("myapp", []);
//定義一個數組
var user = [{
id: 1,
name: "軒軒",
age: 22,
sex: "男"
},
{
id: 2,
name: "軒",
age: 33,
sex: "女"
},
{
id: 3,
name: "小軒",
age: 44,
sex: "男"
},
{
id: 4,
name: "大軒",
age: 55,
sex: "女"
}
]
//綁定控制器
app.controller("myctr", function($scope) {
$scope.users = user;
// $scope.ageSize = "";
//年齡範圍過濾
$scope.ageTest = function(age, ageSize) {
//alert(ageSize);
//alert(age);
if(ageSize != "--請選擇--") {
var agess = ageSize.split("-");
var ageMin = agess[0];
var ageMax = agess[1];
if(age < ageMin || age > ageMax) {
return false;
} else {
return true;
}
} else {
return true;
}
}
//全部刪除
$scope.remove = function(index) {
if(confirm("是否全部刪除")) {
$scope.users.splice(index);
}
}
//單行刪除
//方式1根據下標刪除一行信息
/*$scope.del = function(index) {
alert("確定要刪除" + index + "嗎");
$scope.users.splice(index, 1);
}*/
//方式2根據名字刪除一行
$scope.del=function(name){
if(confirm("是否刪除"+name+"商品")){
var p;
for(index in $scope.users){
p=$scope.users[index];
}
if(p.name==name){
$scope.users.splice(index,1);
}
}
}
//批量刪除
$scope.removes = function() {
var userNames = [];
for(index in $scope.users) {
if($scope.users[index].pi == true) {
userNames.push($scope.users[index].name);
}
}
if(userNames.length > 0) {
if(confirm("是否刪除選中項")) {
for(i in userNames) {
var name = userNames[i];
for(i2 in $scope.users) {
if($scope.users[i2].name == name) {
$scope.users.splice(i2, 1);
}
}
}
}
} else {
alert("請刪除選項");
}
}
//添加信息
$scope.name = "";
$scope.age = "";
$scope.sex = "";
$scope.sub = function() {
var newUser = {
id: $scope.users.length + 1,
name: $scope.name,
age: $scope.age,
sex: $scope.sex
}
$scope.users.push(newUser);
}
//修改用戶信息
$scope.name = name;
$scope.names = "";
$scope.ages = "";
$scope.sexs = "";
$scope.updates = function() {
alert("修改信息");
for(index in $scope.users) {
if($scope.users[index].name == $scope.names) {
$scope.users[index].age = $scope.ages;
$scope.users[index].sex = $scope.sexs;
}
}
}
//根據標題排序
$scope.bold = "bold";
$scope.title = 'name';
$scope.desc = 0;
$scope.ss = '';
$scope.dian=function(tit){
$scope.title=tit;
$scope.desc=!$scope.desc;
}
})
</script>
</head>
<center>
<body ng-app="myapp" ng-controller="myctr">
<h1>信息表</h1>
<!--信息表1-->
<table cellpadding="0" cellspacing="0" border="1">
<!-- 導航欄 -->
<tr>
<td colspan="2"></td>
<td><input type="text" placeholder="輸入用戶名" ng-model="ss" /></td>
<!-- 查詢年齡範圍框 -->
<td> 年齡：
<select id="age" ng-model="ageSize" ng-init="ageSize='--請選擇--'">
<option>--請選擇--</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
<option>51-60</option>
</select> </td>
<td colspan="2" align="right"><button ng-click="removes()">批量刪除</button></td>
</tr>
<!-- 表頭部分-->
<tr>
<th align="left"><input type="checkbox"></th>
<th align="left" ng-click="dian('id')">id</th>
<th ng-click="dian('name')">用戶名</th>
<th ng-click="dian('age')">年齡</th>
<th ng-click="dian('sex')">性別</th>
<th>操作</th>
</tr>
<!--循環遍歷-->
<tr ng-repeat="x in users |filter:{'name':ss} |orderBy:title:desc" ng-if="ageTest(x.age,ageSize)">
<td><input type="checkbox" ng-model="x.pi"></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.sex}}</td>
<td>
<button ng-click="del(x.name)">刪除</button>
</td>
</tr>
</table>
<button>添加信息</button>
<!-- 添加信息表2-->
<table cellpadding="10" cellspacing="1" border="1">
<tr>
<th>用戶名</th>
<td><input ng-model="name" placeholder="輸入用戶名"></td>
</tr>
<tr>
<th>年齡</th>
<td><input ng-model="age" placeholder="輸入年齡"></td>
</tr>
<tr>
<th>性別</th>
<td><input ng-model="sex" placeholder="輸入性別"></td>
</tr>
<!-- 提交按鈕 -->
<tr align="center">
<td colspan="2"><input type="button" ng-click="sub()" value="提交"></td>
</tr>
</table>
<!-- 修改信息表3 -->
<table border="1" cellspacing="1" cellpadding="10">
<button>修改信息</button>
<tr>
<th>用戶名：</th>
<td><input ng-model="names" placeholder="請輸入用戶名" /></td>
</tr>
<tr>
<th>年齡</th>
<td><input ng-model="ages" placeholder="請輸入年齡" /></td>
</tr>
<tr>
<th>性別</th>
<td><input ng-model="sexs" placeholder="請輸入性別" /></td>
</tr>
<!-- 提交按鈕 -->
<tr align="center">
<td colspan="2"><input type="button" value="提交" ng-click="updates()" /></td>
</tr>
</table>
</body>
</center>
</html>
信息題(查詢+批量刪除+修改+添加)
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
MUI 5+plus 獲取APP根目錄
/* 功能:獲取App根目錄 實例:app.getRoot() 當前訪問路徑：/page/index.html，結果：../ 當前訪問路徑：/page/child/index.html，結果：../.