基于angular.js发送ajax请求实现前后台数据交互
来源:互联网 发布:单片机排针怎么用 编辑:程序博客网 时间:2024/05/17 09:39
1、首先在html界面中绑定一个事件
<div class="form-group pull-left" style="margin-left:0px;"> <label style="display: inline;"><span></span>{{selectDepartment.name}}</label> <select ng-model="department" ng-change="changeDepartmentLinkageTeam(department.value)" ng-options="option as option.name for option in selectDepartment.options track by option.value" style="width: 180px;margin-left: 3px;"></select></div>
名词解释:ng-options表明这是一个select选择标签,
ng-change绑定的是一个onchange事件
ng-model表示将option绑定在department中
option as option.name for option in selectDepartment.options track by option.value
option as option.name 将选择的对象与对象的名字绑定到一起
in selectDepartment.options 表明所有的下拉框选项都绑定在selectDepartment的options中
track by option.value 表明在判断的时候是按照当前选择的option的value值进行判断(默认是地址值)。
当我们在选择了某个下拉款中的值后我们选择的值存储到department中
ng-change事件将选择的值的value属性传到方法中。
2、定义ng-change事件,通过ajax向后台发送数据
//加载change事件 $scope.changeDepartmentLinkageTeam=function (option) { var selectTeam; $.ajax({ method:"post", dataType:"json", data:{unitCode:option}, url:baseUrl + "/unit/hierarchy/group", success:function (response) { //将response中的参数封装成客服班组指定的数据格式 var options = new Array(); for(var i = 0; i< response.length ;i++) { var tempData = response[i]; //将数据存储到options中 options[i] = ({name:tempData.unitName,value:tempData.unitCode}); } //将"全部"存储到options中 options.unshift({value:"全部",name:"全部"}); selectTeam = { name : "客服班组:", options:options } } });return selectTeam; };
定义事件的格式如上所示:
这里用到的return是将从ajax数据作为返回值,返回到当前定义的层中
app.service('voiceAnalysisSearchData',function () {
这个是在service层中定义一个方法,在controller层里面将service定义的参数传递到contrller中,引用使用即可
引用方式如下所示:
app.controller('customerDemandAnalysisCtrl', function($scope,voiceAnalysisSearchData)
然后将selectTeam(如上所示json格式的对象)赋值给html中定义的下拉框对象名
$scope.selectTeam = selectTeam; 这样就做到了两个下拉列表的二级联动
注意:在angular中对象能够自动继承,而字符串不能自动继承,
如果我们想要在子类中继承父类的值我们可以将字符串定义如下:
$scope.team = {}; $scope.team.value = "hello"; 这样就能做到自动继承
如果直接定义 $scope.team = "hello";就不能自动继承。
阅读全文
0 0
- 基于angular.js发送ajax请求实现前后台数据交互
- Ajax、jquery实现前后台数据交互
- AJAX 前后台数据交互
- Silverlight融合ajax实现前后台数据交互
- ajax前后台交互-js相关语法
- struts1 ajax前后台数据交互
- jQuery的ajax前后台数据交互
- ajax前后台交互实现省市区级联
- AJAX--前后台交互
- ajax前后台交互
- 利用AjaxPro2实现前后台数据交互
- 前后台数据交互
- 前后台数据交互
- 使用Ajax提交数据,进行前后台数据交互
- jQuery.ajax 实现前后台数据传送
- ASP.NET—007:GridView数据的保存($.ajax实现前后台交互)
- Jquery Ajax前后台交互
- ajax前后台交互测试
- VS Code “Cannot validate the php file. The php program was not found”解决办法
- win7 系统安装图解教程
- Excel 快速输入各类数据的方法技巧示例总结
- 接口的幂等性
- View[5] ViewTreeObserver
- 基于angular.js发送ajax请求实现前后台数据交互
- 台风与晴天
- Excel自动为该单元格所在行和列突出显示颜色强调数据
- python代码风格
- linux下c语言实现图片的socket传输和数据库的存储
- Raspberry pi在linux系统上为python导入easygui模块的全过程
- linux 下使用diff命令比较两个文件夹
- A/B 乘法逆元
- Centos突然出现连接不上网(有线网络提示已断开)