multiple cascading dropdown with Angular & MVC

Question

Firstly apologies that post looks a bit long winded (it is just repeated code, so looks longer than it is). I'm trying to implement a multiple level cascading dropdown - It works fine for the initial and first level (COLUMN1 & COLUMN2) but not for COLUMN3.

Here is the controller:

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);
}
}

Here is the 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;
             });
    };
};

Finally here is the 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 is actually returning empty when there is data in the database.

If you know why Col3Data is not returning back anything then your help would be most appreciated.

Many thanks

Shaheen

Answer 1

Okay i found out what the problem was. When doing the following:

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

I was using 'values' for the first part rather than a 'key', so this was not returning data back.

changing to the following worked:

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

Viplock, thanks for your help as I found:

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

very helpful.

Regards,

Shaheen K

Answer 2

If there will be some issue with digest cycle not worked , you can try using $scope.$apply() like Update For sending data

   $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();
         });
};