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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.