angularjs使用http服务请求网络数据展示

最新推荐文章于 2022-03-29 09:36:38 发布
最新推荐文章于 2022-03-29 09:36:38 发布
阅读量273 收藏
点赞数
文章标签： angularJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tysj78/article/details/79836529
版权
<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js"></script>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
</style>
</head>


<body>
<div ng-app="mapp" ng-controller="mctr">
请输入搜索内容：<input type="text" ng-model="querykey" /><br />
<input type="button" value="批量删除" ng-click="plDelete()" /><input type="button" value="反选" ng-click="fan()"><input type="button" value="增加" ng-click="showd=!showd" />
<br />
<select ng-model="orderKey">
<option value="">--排序--</option>
<option value="id">编号</option>
<option value="price">价格</option>
</select>


<!--添加域-->
<div align="center" ng-show="showd">
<br /> 商品编号：
<input type="text" ng-model="tid" /><br /> 商品名称：
<input type="text" ng-model="tname" /><br /> 商品价格：
<input type="text" ng-model="tprice" /><br /> 商品数量：
<input type="text" ng-model="tnumber" /><br />
<!--二级联动-->
商品产地：
<select ng-options="p.pro for p in pros" ng-model="selectd" ng-change="proChange(selectd)">
<option value="">--选择省--</option>
</select>
<select ng-options="c for c in city" ng-model="citySelectd">
<option value="">--选择市--</option>
</select>
<br /> 新成：
<select ng-model="xcSelect">
<option value="">--请选择--</option>
<option value="新茶">新茶</option>
<option value="成茶">成茶</option>
</select>
<br />
<input type="button" value="添加商品" ng-click="addGoods()" />
<br/><br/>
</div>


<table>
<tr>
<th><input type="checkbox" ng-model="all" ng-click="checkAll()"></th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>产地</th>
<th>新成</th>
<th>操作</th>
</tr>
<tr ng-repeat="t in tea  | filter:querykey| orderBy:orderKey " style="{{$odd?'background-color: red':'background-color: yellow'}}">
<td><input type="checkbox" ng-model="t.ck"></td>
<td>{{t.id}}</td>
<td>{{t.name}}</td>
<td>{{t.price | currency:'￥'}}</td>
<td>{{t.number}}</td>
<td>{{t.chandi}}</td>
<td>{{t.xc}}</td>
<td>
<input type="button" value="修改" ng-click="showUpdate($index)">
<input type="button" value="删除" ng-click="deleteById($index)">
</td>
</tr>
</table>
<!--修改域-->
<div align="center" ng-show="updatePage">
<br /> 商品编号：
<input type="text" ng-model="uid" /><br /> 商品名称：
<input type="text" ng-model="uname" /><br /> 商品价格：
<input type="text" ng-model="uprice" /><br /> 商品数量：
<input type="text" ng-model="unumber" /><br /> 产地：
<input type="text" ng-model="uchandi" /><br /> 新成：
<select ng-model="uXc">
<option value="">--请选择--</option>
<option value="新茶">新茶</option>
<option value="成茶">成茶</option>
</select>
<br />
<input type="button" value="修改商品" ng-click="updateGoods()" />
<br/><br/>
</div>
</div>
<script>
angular.module('mapp', []).controller('mctr', function($scope, $http) {
$http.get('http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=ThirdTest').then(function(response) {
$scope.tea = response.data;
});


// $scope.showd=false;
$scope.tid = "";
$scope.tname = "";
$scope.tprice = "";
$scope.tnumber = "";


$scope.pros = [{
pro: "北京",
childer: ["西二旗", "上地"]
},
{
pro: "河北",
childer: ["邯郸", "石家庄", "保定"]
},
{
pro: "河南",
childer: ["信阳", "南阳", "濮阳"]
},
{
pro: "湖南",
childer: ["长沙", "湘潭庄", "衡阳"]
},
{
pro: "湖北",
childer: ["仙桃", "武汉", "黄石"]
}
];
//添加商品
$scope.addGoods = function() {
var goods = {};
goods.id = $scope.tid;
goods.name = $scope.tname;
goods.price = $scope.tprice;
goods.number = $scope.tnumber;
goods.chandi = $scope.selectd.pro + $scope.citySelectd;
goods.xc = $scope.xcSelect;
$scope.tea.push(goods);
$scope.showd = false;
}


//删除根据表格index
$scope.deleteById = function(id) {
$scope.tea.splice(id, 1);
}
//修改----------
//显示修改域
$scope.updatePage = false;
$scope.showUpdate = function(id) {
$scope.updatePage = true;
$scope.utea = $scope.tea[id];
$scope.uid = $scope.tea[id].id;
$scope.uname = $scope.tea[id].name;
$scope.uprice = $scope.tea[id].price;
$scope.unumber = $scope.tea[id].number;
$scope.uchandi = $scope.tea[id].chandi;
$scope.uXc = $scope.tea[id].xc;


}
//提交修改信息，完成修改
$scope.updateGoods = function() {
$scope.utea.id = $scope.uid;
$scope.utea.name = $scope.uname;
$scope.utea.price = $scope.uprice;
$scope.utea.number = $scope.unumber;
$scope.utea.chandi = $scope.uchandi;
$scope.utea.xc = $scope.uXc;
$scope.updatePage = false;
}
//批量删除
$scope.plDelete = function() {
for(var i = 0; i < $scope.tea.length; i++) {
if($scope.tea[i].ck) {
$scope.tea.splice(i, 1);
i--;
}
}
}
//全选
$scope.checkAll = function() {
for(var i = 0; i < $scope.tea.length; i++) {
$scope.tea[i].ck = $scope.all;
}


}
//反选
$scope.fan = function() {
for(var i = 0; i < $scope.tea.length; i++) {
$scope.tea[i].ck = !$scope.tea[i].ck;
}
}
//二级联动
// $scope.selectd = $scope.pros[0];
// $scope.city = $scope.pros[0].childer;
//省改变，市跟着变
$scope.proChange = function(selectd) {
$scope.city = $scope.selectd.childer;
}
});
</script>
</body>


</html>
思君天涯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解AngularJS如何实现跨域请求
11-25
下面阐述一下AngularJS中使用$http实现跨域请求数据。 AngularJS XMLHttpRequest：$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success...
Angular学习笔记03(服务,发送网络请求)
多看书少吃饭的博客
05-31 675
Angular学习笔记03(服务,发送网络请求)
AngularJS $http用法总结
心若向阳，无谓悲伤的博客
06-15 9820
    最近由于项目需要，在研究AngularJS $http的用法，查了很多资料，发现貌似没有一篇内容可以完整的满足我对$http的基本了解，为了下次方便自己查找，所以特意把最近查到的一些资料和自己的理解记录下来。如果有理解不到位的地方，也欢迎路过的大神可以指点。一.$http简介1.$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。2.$http服务，它是对原生X...
angularJs路由和网络请求
jie的博客
09-20 733
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">script> script src="https://apps.bdim
angularjs网络请求展示
wanglinuo521的博客
01-14 323
首页 个人 图片 购物 var app=angular.module("app",["ngRoute"]); //配置路由 app.config(['$routeProvider',function($routeProvider){ $routeProvider.when('/first',{template:'{{x.City}}'}) .when('/my'
AngularJs的基础——$http请求数据
bboyjoe的博客
12-29 1万+
$http请求数据主要会有以下三种方式 1.get请求 2.post请求 3.jsonp Angular基础 姓： 名： 姓名： var myApp=angular.module('myApp',[]); myApp.controller('personCtrl',fu
angularjs请求数据的方法示例
12-11
Angular get 请求数据 在用到的地方引入 HttpClient 并在构造函数声明 import {HttpClient} from "@angular/common/http"; constructor(public http:HttpClient) { } get 请求数据 var api =
AngularJS $http模块POST请求实现
10-20
本篇文章主要介绍了AngularJS $http模块POST请求实现，这里整理了详细的代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
浅谈angularjs $http提交数据探索
10-20
主要介绍了浅谈angularjs $http提交数据探索，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
angularjs中$http请求的几种写法
10-18
angularjs中利用http从后台请求数据的几种写法
Angularjs http网络请求
wxy_wonder的博客
01-18 222
var mo=angular.module("myapp",[]); mo.controller("con",function($scope,$http){ $http({ method:"GET", url:"aa.json" }).success(function(data){ $scope.names=data.data.pc_feed_focus;
ionic中使用angularjs的http请求的坑
布布熊的博客
03-23 1915
ionic中使用angularjs的http请求的坑公司开发的app使用的是ionic结合angularjs的框架，来到之后一直都是在原有开发的基础上二次开发或修改，今天有空就想着自己试着搭一个简单的功能模块齐全的app。网络请求机制是app一个必不可少的部分，一般app都会将http请求封装在httpService中，然后需要发送请求的地方直接将请求路径作为参数传递进去进行调用，我在一个test...
angularjs的$http做网络访问
冰雪遇流年的博客
09-01 1248
// $http的get方法 // 第一个参数：url请求的网络地址 // 第二个参数：config，请求的设置，get请求的数据放在config.params // post请求放在config.data里面(就是把params换成data) // 用angularjs的$http服务做网络访问 var app
Angularjs的http请求
m0_52941727的博客
03-29 1694
Restangular的使用方式总结
angular 使用demo 网络请求接口
Jonly_W的博客
01-09 2215
$scope,$location,$timeout,$interval,$http  的 简单使用技巧                                                        var app=angular.module("myApp",[])             app.controller("myCtrl",function
AngularJS中的$http服务请求数据
qq_39714476的博客
10-25 1130
charset="UTF-8">     type="text/javascript" src="../AngularJS/angular.js" >     var app = angular.module("myApp",[]);   app.controller("myCtrl",function($scope,$h
angular http请求数据
qq_41212790的博客
01-18 770
小可爱 根据薪资排序 根据-薪资排序 批量删除 员工姓名 员工年龄 员工性别 员工薪资 出生日期 部门名称 删除 {{x.name}} {{Age(x.birthday)}} {{x.gender}} {{x.salary| currency:"￥:"}}
AngularJs $http 请求服务
weixin_33984032的博客
11-21 177
$http $http是Angular的一个核心服务，它有利于浏览器通过XMLHttpRequest 对象或者 JSONP和远程HTTP服务器交互。 $HTTP API 是基于 $q服务暴露的deferred/promise APIs。 快捷使用方式： $http.get $http.head $http.post $http.put $http.delete $http.jso...
angularjs中的$http详解
热门推荐
编程之路
08-29 2万+
语法: 要将区别先弄清$http服务，它是对原生XMLHttpRequest对象的简单封装，是只能接受一个参数的方法， 这个方法会返回一个promise对象，具有sccess和error两个方法。当然，我们也可以在响应返回时用then 方法来处理，会得到一个特殊的参数，代表了对象的成功或失败信息，或者可以使用success和error回调 代替。 $http( ).then(functi
angularjs怎么监听https请求
最新发布
06-06
在AngularJS中监听HTTPS请求的步骤与HTTP请求相同，使用`$http`服务来发送请求并使用拦截器来监听请求和响应。 要监听HTTPS请求，您需要确保您的服务器端使用HTTPS协议。在客户端，AngularJS会自动检测您是否使用了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值