angular制作下拉框联动

最新推荐文章于 2020-05-29 17:09:37 发布

zhifeng687

最新推荐文章于 2020-05-29 17:09:37 发布

阅读量1.8k

点赞数

分类专栏： angular.js

本文链接：https://blog.csdn.net/qq_26222859/article/details/51127191

版权

angular.js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

/*
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