AngularJS網絡請求數據、刪除、查找、 排序
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
<style>
#name1{
border-radius: 20px;
}
#name2{
border-radius: 20px;
}
</style>
<script>
var App = angular.module("App", []);
App.controller("DemoCtrl", function($scope, $http) {
//網絡請求數據
$http({
method: "GET",
url: "http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid"
}).success(function(data) {
$scope.datas = data;
console.log(data);
}).error(function(data) {
});
//刪除單個數據
$scope.delete = function(index) {
if(confirm("確定要刪除麼？")) {
$scope.datas.splice(index, 1);
if($scope.datas.length<=0){
$scope.ff = false;
$scope.gg = true;
}
}
if($scope.datas.length <= 0) {
alert("無可操作數據");
}
}
//全選反選
$scope.cheakedAllFun = function() {
if($scope.checkAll) {
for(var x = 0; x < $scope.datas.length; x++) {
$scope.datas[x].state = true
}
} else {
for(var x = 0; x < $scope.datas.length; x++) {
$scope.datas[x].state = false;
}
}
}
$scope.ff = true;
//批量刪除
$scope.delAll = function() {
var arrs = [];
//循環遍歷數組
for(var x = 0; x < $scope.datas.length; x++) {
if($scope.datas[x].state) {
arrs.push($scope.datas[x].name);
}
}
if(arrs.length <= 0) {
alert("請您選中需要刪除的數據！");
} else {
for(var x = 0; x < arrs.length; x++) {
for(var x2 = 0; x2 < $scope.datas.length; x2++) {
if(arrs[x] == $scope.datas[x2].name) {
$scope.datas.splice(x2, 1);
if($scope.datas.length<=0){
$scope.ff = false;
$scope.gg = true;
}
}
}
}
}
}
//
});
</script>
</head>
<body ng-controller="DemoCtrl">
<center ng-show="gg" style="margin-top: 200px;">
<h1>無數據操作</h1>
</center>
<center ng-show="ff">
<input type="text" placeholder="根據姓名模糊查詢" ng-model="SelName" id="name1"/>
<input type="text" placeholder="根據部門模糊查詢" ng-model="Seldepartment" id="name2"/>
<select ng-model="Or_salary">
<option>根據薪資排序</option>
<option value="salary">薪資正序</option>
<option value="-salary">薪資倒序</option>
</select>
<button ng-click="delAll()">批量刪除</button>
<table border="1px" cellspacing="0" width="850px" style="margin-top: 30px;" height="300px">
<tr align="center">
<td><input type="checkbox" ng-model="checkAll" ng-click="cheakedAllFun()" /></td>
<td>員工名稱</td>
<td>員工年齡</td>
<td>員工性別</td>
<td>員工薪資</td>
<td>出生日期</td>
<td>部門名稱</td>
<td>刪除</td>
</tr>
<tr ng-repeat="x in datas |filter:{name:SelName} |filter:Seldepartment|orderBy:Or_salary" align="center">
<td><input type="checkbox" ng-model="x.state" /></td>
<td>{{x.name}}</td>
<td>{{x.id}}</td>
<td>{{x.gender}}</td>
<td>{{x.salary|currency:"￥"}}</td>
<td>{{x.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{x.department.name}}</td>
<td><button ng-click="delete($index)">刪除</button></td>
</tr>
</table>
</center>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
AngularJs過濾器使用
過濾器可以用來格式化需要展示給用戶的數據。在Angular中既可以是在HTML中，也可以是在Js文件中這兩個地方來使用過濾器。 下面就拿字符串轉換爲大寫的來舉例。 1）HTML中轉化 在HT