angular中使用multiselect实现二级下拉联动

在angular中用到了bootstrap-multiselect下拉插件，实现二级联动的效果：

1）引入插件：

	<link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../lib/bootstrap-multi-select/css/multiple-select.css">
	<script type="text/javascript" src="../lib/jquery/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../lib/bootstrap-multi-select/js/multiple-select.js"></script>
	<script type="text/javascript" src="../lib/angular/angular-1.3.0.js"></script>

2）html下拉框：

<div ng-app="app" ng-controller="ctrl">
	<select class="item">
		<option value="one">One</option>
		<option value="two">Two</option>
		<option value="three">Three</option>
	</select>
	<select class="items">
        <option></option>
    </select>
</div>

3）js实现下拉效果，这里用到了$scope.mulLink（）函数，当一级改变的时候，用这个函数给二级下拉赋值该表其列表：

<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('ctrl', function($scope){
    	//初始化数值
    	$scope.a = ['one1','one2','one3'];
    	$scope.b = ['two1','two2','two3'];
    	$scope.c = ['three1','three2','three3'];
    	//下拉框赋值
    	$scope.mulLink = function(dom,data){
        var site = [];
                    $.each(data, function(index, values) {
                        site.push({
                            label : values,
                            value : values
                        });
                    });
	        dom.multiselect('dataprovider',site);
	    };
	    //建立下拉框
	    $(".item,.items").multiselect({buttonWidth: '200px',enableFiltering: true});
	    //延迟重建下拉框和调用联动
	    setTimeout(function(){$(".item,.items").multiselect('rebuild');$(".item").change();})
	    //联动事件
    	$(".item").change(function(){
	        if($(this).val() == 'one'){
	            $scope.mulLink($('.items'),$scope.a);
	        };
	        if($(this).val() == 'two'){
	            $scope.mulLink($('.items'),$scope.b);
	        };
	        if($(this).val() == 'three'){
	            $scope.mulLink($('.items'),$scope.c);
	        };
	    });
    });
    	
</script>

虽说是在angular的环境下，但是用到的还是jq的一些方法，因为multiselect插件实现下拉框的效果并不是直接操作原生的select的dom元素，而是通过添加其他元素实现的，所以如果用ng-model绑定dom后会带来一些操作问题，所以这里直接用jq操作dom元素来实现这个功能。