angular 网络请求代码改查_angular前端项目中请求接口的前缀为localhost,如何更改-优快云博客

本文介绍了一个使用AngularJS实现的数据管理应用案例，该应用能够从远程服务器获取员工数据，并提供了数据展示、过滤、排序及删除等功能。通过AngularJS的双向数据绑定特性，实现了对数据的有效管理和操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript" src="js/angular.js" ></script>
	<script>
	var app = angular.module("myApp",[]);
	app.controller("myCtrl",function($scope,$http){
	$http({
	method:"GET",
	url:"http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid"
	}).success(function(data){
	$scope.datas = data


	});
	//删除
	$scope.sc = function(name){
	if (window.confirm("确定删除？")) {
	for (index in $scope.datas) {
	if (name == $scope.datas[index].name) {
	$scope.datas.splice(index,1);

	}
	}
	}
	}

	$scope.px = "";

	//全选和反选
	$scope.selectAllFun = function(){
	if ($scope.selectAll) {
	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.plsc = 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);
	}
	}

	}
	}
	}
	});
	</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
	<input type="text" placeholder="根据姓名模糊查询" ng-model="mxcx"/>
	<input type="text" placeholder="根据部门模糊查询" ng-model="bmcx"/>
	<select ng-model="px">
	<option value="">根据薪资排序</option>
	<option value="salary">薪资正序</option>
	<option value="-salary">薪资倒序</option>
	<option value="birthday">生日正序</option>
	<option value="-birthday">生日倒序</option>
	</select>
	<button ng-click="plsc()">批量查询</button>
	<br /><br />
	<table border="1" cellpadding="10" cellspacing="0">
	<tr>
	<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
	<th>员工姓名</th>
	<th>员工年龄</th>
	<th>员工性别</th>
	<th>员工薪资</th>
	<th>出生日期</th>
	<th>部门名称</th>
	<th>删除</th>
	</tr>
	<tr ng-repeat="p in datas \| filter:{name:mxcx} \| filter:bmcx \| orderBy:px">
	<th><input type="checkbox" ng-model="p.state"/></th>
	<td>{{p.name}}</td>
	<td>{{p.id}}</td>
	<td>{{p.gender}}</td>
	<td>{{p.salary \| currency:"￥"}}</td>
	<td>{{p.birthday \| date:"yyyy-MM-dd hh:mm:ss"}}</td>
	<td>{{p.department.name}}</td>
	<td><button ng-click="sc(p.name)">删除</button></td>
	</tr>
	</table>
	</body>
	</html>