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中,引用使用即可
引用方式如下所示:
然后将selectTeam(如上所示json格式的对象)赋值给html中定义的下拉框对象名app.controller('customerDemandAnalysisCtrl', function($scope,voiceAnalysisSearchData)
$scope.selectTeam = selectTeam; 这样就做到了两个下拉列表的二级联动
注意:在angular中对象能够自动继承,而字符串不能自动继承,
如果我们想要在子类中继承父类的值我们可以将字符串定义如下:
$scope.team = {}; $scope.team.value = "hello"; 这样就能做到自动继承
如果直接定义 $scope.team = "hello";就不能自动继承。