多个级联下拉菜单与Angular &MVC

multiple cascading dropdown with Angular & MVC

本文关键字：Angular MVC 下拉菜单 级联      更新时间：2023-09-26

首先道歉，这篇文章看起来有点冗长(它只是重复的代码，所以看起来比它长)。我正试图实现一个多层次的级联下拉-它的工作很好，为初始和第一级(COLUMN1 &COLUMN2)，但不能用于COLUMN3。

这是控制器:

public JsonResult GetCol1()
{
using (EntityName db = new EntityName())
{
    var ret = db.TABLE_NAME.Select(x => new { x.COLUMN1 }).Distinct().ToList();
    return Json(ret, JsonRequestBehavior.AllowGet);
}
}
[HttpPost]
public JsonResult GetCol2(string col1)
{
using (EntityName db = new EntityName())
{
    var ret = db.TABLE_NAME.Where(x => x.COLUMN1 == col1).Select(x => new { x.COLUMN2 }).Distinct().ToList();
    return Json(ret, JsonRequestBehavior.AllowGet);
}
}
[HttpPost]
public JsonResult GetCol3(string col1, string col2)
{
using (EntityName db = new EntityName())
{
    var ret = db.TABLE_NAME.Where(x => x.COLUMN1 == col1).Where(x => x.COLUMN2 == col2).Select(x => new { x.COLUMN3 }).Distinct().ToList();
    return Json(ret, JsonRequestBehavior.AllowGet);
}
}

JS:

    app.controller('DropdownPopulation', function ($scope, $http) {
    //$http service for Getting Column1  
    $http({  
        method: 'GET',  
        url: '/Data/GetCol1'  
    })
    .success(function (data) {  
        $scope.Col1Data = data;  
    });  
    //$http service for getting Column2
    $scope.GetCol2 = function () {
        $http({
            method: 'POST',
            url: '/Data/GetCol2',
            data: JSON.stringify({ COLUMN1: $scope.col1 })
        }).
             success(function (data) {
                 $scope.Col2Data = data;
             });
    };
    //$http service for getting Column3  
    $scope.GetCol3 = function () {
        $http({
            method: 'POST',
            url: '/Data/GetCol3',
            data: JSON.stringify({ COLUMN1: $scope.col1, COLUMN2: $scope.col2 })
        }).
             success(function (data) {
                 $scope.Col3Data = data;
             });
    };
};
最后是html/angular: 
<!-- Column 1 -->
<div ng-controller="DropdownPopulation">
<div class="form-group">
    <label class="control-label col-sm-2" for="Column1">Column1</label>
    <div class="col-sm-10">
        <select class="form-control" name="Column1"
            data-ng-model="col1" id="Column1"
            data-ng-options="c.COLUMN1 as c.COLUMN1 for c in Col1Data "
            data-ng-change="GetCol2()">
            <option value="" disabled selected>Select Col 1</option>
        </select>
    </div>
</div>
<!-- Column 2 -->
<div class="form-group">
    <label class="control-label col-sm-2" for="Column2">Column2</label>
    <div class="col-sm-10">
        <select class="form-control" name="Column2"
            data-ng-model="col2" id="Column2" 
            data-ng-options="c.COLUMN2 as c.COLUMN2 for c in Col2Data "
            data-ng-change="GetCol3()"
            data-ng-disabled="!Col1Data" >
            <option value="" disabled selected>Select Col 2</option>
        </select>
    </div>
</div>
<!-- Column 3 -->
<div class="form-group">
    <label class="control-label col-sm-2" for="Column3">Column3</label>
    <div class="col-sm-10">
        <select class="form-control" name="Column3"
            data-ng-model="col3" id="Column3"
            data-ng-options="c.COLUMN3 as c.COLUMN3 for c in Col3Data"
            data-ng-disabled="!Col2Data" >
            <option value="" disabled selected>Select Col 3</option>
        </select>
    </div>
</div>
</div>

当数据库中有数据时，Col3Data实际上返回空。

如果你知道为什么Col3Data没有返回任何东西，那么你的帮助将是最感激的。

多谢夏新

好了，我找到问题所在了。当执行以下操作时:

data-ng-options="c.COLUMN1 as c.COLUMN1 for c in Col1Data

我在第一部分使用'values'而不是'key'，所以这不会返回数据。

改为下面的工作:

data-ng-options="c.COLUMN1_KEY as c.COLUMN1 for c in Col1Data

Viplock，谢谢你的帮助，我发现:

var dataToSend={ COLUMN1: $scope.col1, COLUMN2: $scope.col2 };

很有帮助。

问候,

Shaheen K

如果存在消化循环不工作的问题，您可以尝试使用$scope.$apply()Update发送数据

   $scope.GetCol3 = function () {
   var dataToSend={ COLUMN1: $scope.col1, COLUMN2: $scope.col2 };
    $http({
        method: 'POST',
        url: '/Data/GetCol3',
        data: dataToSend
    }).
         success(function (data) {
             $scope.Col3Data = data;
             $scope.$apply();
         });
};
相关文章：