AngularJS增、刪、改、查
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
<style>
.cls1 {
float: left;
margin-left: 560px;
}
.cls2 {
float: left;
margin-left: 40px;
}
table {
margin-top: 30px;
width: 850px;
height: 200px;
}
</style>
<script>
var App = angular.module("App", []);
App.controller("Demo", function($scope) {
$scope.datas = [{
id: 1,
name: "張三",
age: 21,
sex: "男",
tel: 18611111111,
hobby: "只愛學習",
}, {
id: 2,
name: "李四",
age: 20,
sex: "男",
tel: 18622222222,
hobby: "獨自學習",
}, {
id: 3,
name: "小花",
age: 19,
sex: "女",
tel: 18633333333,
hobby: "聽着歌學習",
}, {
id: 4,
name: "翠花",
age: 18,
sex: "女",
tel: 18644444444,
hobby: "看書學習",
}, {
id: 5,
name: "小風",
age: 18,
sex: "男",
tel: 18655555555,
hobby: "去圖書館看書",
}];
//刪除
$scope.delete = function(index) {
if(confirm("確認要刪除麼？")) {
$scope.datas.splice(index, 1);
}
}
//查詢
$scope.SelName = function() {
//定義一個空數組
$scope.n1 = [];
//得到查詢的同步輸入值（ng-module）
var sel = $scope.select;
//循環遍歷集合數據
for(var i = 0; i < $scope.datas.length; i++) {
names = $scope.datas[i].name;
if(names.indexOf(sel) != -1) {
$scope.n1.push($scope.datas[i]);
$scope.datas = $scope.n1;
}
}
}
//添加
$scope.addUser = function() {
//添加框顯示
$scope.addAll = true;
//定義變量
var flag = false;
$scope.addAllFun = function() {
if(flag = true) {
$scope.datas.push({
id: $scope.addid,
name: $scope.addname,
age: $scope.addage,
sex: $scope.addsex,
tel: $scope.addtel,
hobby: $scope.addhobby
})
}
}
}
//修改
$scope.update = function(index) {
//定義變量
up_index=index;
//修改框顯示
$scope.updateAll = true;
$scope.updateAllFun=function(){
$scope.datas[up_index].id = $scope.updateId;
$scope.datas[up_index].name = $scope.updateName;
$scope.datas[up_index].age = $scope.updateAge;
$scope.datas[up_index].sex = $scope.updateSex;
$scope.datas[up_index].tel = $scope.updateTel;
$scope.datas[up_index].hobby = $scope.updateHobby;
}
}
})
</script>
</head>
<body ng-controller="Demo">
<center>
年齡排序
<select ng-model="selOrder">
<!--<option selected="selected">請選擇</option>-->
<option value="age">年齡正序</option>
<option value="-age">年齡倒序</option>
</select>
id排序
<select ng-model="Order_id">
<option>請選擇</option>
<option value="id">按照id正序</option>
<option value="-id">按照id倒序</option>
</select>
<input type="text" ng-model="select" /><button ng-click="SelName()">按照姓名查詢</button>
<button ng-click="addUser()">添加新用戶</button>
<table border="1px" cellspacing="0">
<tr align="center">
<td>id</td>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>聯繫方式</td>
<td>愛好</td>
<td>操作</td>
</tr>
<tr align="center" ng-repeat="x in datas|orderBy:selOrder|orderBy:Order_id">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.sex}}</td>
<td>{{x.tel}}</td>
<td>{{x.hobby}}</td>
<td>
<button ng-click="update($index)">修改</button>
<button ng-click="delete($index)">刪除</button>
</td>
</tr>
</table>
<div class="cls1">
<form style="border: 2px solid black; width: 380px;margin-top: 20px;" ng-show="addAll">
<h3>添加用戶</h3>
id<input type="text" ng-model="addid" /><br /><br />
姓名<input type="text" ng-model="addname" /><br /><br />
年齡<input type="text" ng-model="addage" /><br /><br />
性別<select ng-model="addsex">
<option>請選擇</option>
<option>男</option>
<option>女</option>
</select><br /><br />
聯繫方式<input type="tel" ng-model="addtel" /><br /><br />
愛好<textarea ng-model="addhobby"></textarea><br /><br />
<button ng-click="addAllFun()">添加</button>
<input type="reset" value="清空" /><br /><br />
</form>
</div>
<div class="cls2">
<form style="border: 2px solid black; margin-top: 20px; width: 380px; " ng-show="updateAll">
<h3>修改用戶</h3>
id<input type="text" ng-model="updateId"/><br /><br />
姓名<input type="text" ng-model="updateName"/><br /><br />
年齡<input type="text" ng-model="updateAge"/><br /><br />
性別<select ng-model="updateSex">
<option selected="selected">請選擇</option>
<option>男</option>
<option>女</option>
</select><br /><br />
聯繫方式<input type="tel" ng-model="updateTel"/><br /><br />
愛好<textarea ng-model="updateHobby"></textarea><br /><br />
<button ng-click="updateAllFun()">確認修改</button>
<input type="reset" value="清空" /><br /><br />
</form>
</div>
</center>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
AngularJs過濾器使用
過濾器可以用來格式化需要展示給用戶的數據。在Angular中既可以是在HTML中，也可以是在Js文件中這兩個地方來使用過濾器。 下面就拿字符串轉換爲大寫的來舉例。 1）HTML中轉化 在HT