angular制作下拉框联动

/* 
    1、了解下拉框联动应该制作的数据格式
*   2、了解ng-options通过track by 设置option的value
*   3、scope对象的属性selectList 代表数据格式中的整个数据,即一级业务数组
*   3、ng-model的指令值“selected1”代表数据格式中的一级业务对象,即selectList中的一个对象;
*   4、scope对象的属性subSelectList 代表数据格式中的二级业务数组,即sub属性值;
*  5、ng-model的指令值“selected2”代表数据格式中二级业务对象,即subSelectList中的一个对象;
*/

html部分

<html ng-app="app">
<body>
	   <div style="margin-left:20px" ng-controller="SelectCtrl" id="selectCtrl"><span>一级业务:</span>
            <select ng-model="selected1" ng-options="m.ywmc for m in selectList track by m.ywmc" ng-change="setSubSelectVal(selected1)" id="yjywbm">
                <option value="">-- 请选择 --</option>
            </select>
            <span>二级业务:</span>
            <select  ng-model="selected2" ng-options="m.ywmc for m in subSelectList track by m.ywbm" id="ywbm">
                <option value="">-- 请选择 --</option>
            </select>
            
      </div>
</body>
<script src="../js/jquery.js"></script>
<script src="../../../plugins/angular/angular.js"></script>
<script>
var app =angular.module('app',[]);
app.controller('SelectCtrl', ['$scope', function ($scope) {
	//初始化数据模型对象
   $scope.selectList = [];
   $scope.setSubSelectVal = function (selected1) {
       $scope.subSelectList = selected1.sub;
   };
   /**
    * function: 更新数据模型对象
    */
   $scope.updateData = function(data){
   	$scope.selectList = data;
   }
   
}]);



var url="./json/businessList.json";
$.ajax({type:"GET",
    url:url,
    dataType:"json",
    timeout:5000,
	success:function(data){
         var $scope = angular.element($("#selectCtrl")).scope();
         $scope.updateData(data);
         $scope.$apply();        
         var ywbm = "QYSDS_A";
         
         if(ywbm!=null){       	
        	 setSelectedBoxData(data,ywbm);
         }    
	},
	 error:function(code,type ,err){
		   console.log(code);
		   console.log(type);
		   console.log(error);
		
	  }
});	
//根据指定ywbm设置下拉框的值
function setSelectedBoxData(dropdown_data,ywbm){
	 if(typeof dropdown_data !="undefined"){
		 //根据业务编码得出一级业务的对象
		var yjywObj = getYjywObj(dropdown_data,ywbm);
		 //设置一级业务下拉框
		  $("#yjywbm").val(yjywObj.ywmc);		
		 //刷新并设置二级业务下拉框
		var $scope = angular.element($("#selectCtrl")).scope();
		$scope.setSubSelectVal(yjywObj);	
		    $scope.$apply();
			$("#ywbm").val(ywbm);
			
	 }
}
//根据业务编码得出一级业务的对象
 function getYjywObj(dataArr,ywbm){
	var yjywObj = {};
	var i=0,j=0, subArr = [];
	for(i=0;i<dataArr.length;i++){
	    subArr = dataArr[i].sub;	    
		for(j=0;j<subArr.length;j++){
			if(subArr[j].ywbm==ywbm){
				yjywObj = dataArr[i];
				return yjywObj;
			}
				
		}
	}
	return yjywObj;
} 
</script>
</html>

请求的json文件

[
	{
		"ywmc": "申报缴款",
		"sub": [
			{
				"ywbm": "QYSDS_A",
				"ywmc": "企业所得税(查账征收)月季度预缴纳税申报表(A类,2015版)"
			}, {
				"ywbm": "02",
				"ywmc": "增值税小规模纳税人申报"
			},
			{
				"ywbm": "02",
				"ywmc": "增值税预缴申报"
			},
			{
				"ywbm": "YBNSRZZS",
				"ywmc": "增值税一般纳税人申报"
			},
			{
				"ywbm": "QYSDS_A_ND",
				"ywmc": "居民企业(查账征收)年度申报"
			},
			{
				"ywbm": "CKZHZHBG",
				"ywmc": "test文书"
			}
		]
	}
]

演示:angular制作下拉框联动-plunkr


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值