angularjs之级联菜单

angularjs之级联菜单

原理:

1.ng-options中val.id as val.name for val in cascading  将id的值赋给 mg-modelone
2.在通过ng-change传给函数
3.当一级下拉菜单的值改变后,执行函数,去后台请求二级下拉菜单的数据,并加载

angularjs代码:

app.controller('addmultiple_scontroller', function($scope, $http) {
    //常量
    $scope.postCfg = postCfg;
    $scope.modelone = "";
    $scope.modeltwo = "";
    $http.post("./getAllExamNameByTid.action").success(function(res) {
        $scope.cascading = res;
    });
    
    $scope.changeone = function(val) {
        if(null != val){
            $http.post("./getAllExamClassifyByEnid.action",{
                "en_id": val
                },$scope.postCfg).success(function(res) {
                $scope.cascadingtwo = res;
            });
        }
    }
});

html代码:

 <p>
            <label>
                <span>所属题库:</span>
                <select ng-model="modelone" ng-options="val.id as val.name for val in cascading" ng-change="changeone(modelone)">
                    <option value="">--请选择--</option>
                </select>
            </label>
            <label>
                <select name="" ng-model="modeltwo" ng-options="val.id as val.name for val in cascadingtwo">
                    <option value="">--请选择--</option>
                </select>
            </label>
 </p>

posted @ 2017-08-16 16:00  莫小龙  阅读(1384)  评论(0编辑  收藏  举报