несколько каскадных выпадающих списков с Angular & MVC

Question

Во-первых, извинения, что сообщение выглядит немного длинным (это просто повторный код, поэтому выглядит дольше, чем он есть). Я пытаюсь реализовать каскадное развертывание с несколькими уровнями - он отлично работает для начального и первого уровней (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/угловая:

<!-- 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 ничего не возвращает, ваша помощь будет оценена по достоинству.

Большое спасибо

Шахин

Answer 1

Если будут какие-то проблемы с перевариванием цикла не работали, вы можете попробовать использовать $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(); 
     }); 
}; 

Answer 2

Хорошо я нашел в чем проблема. При выполнении следующих действий:

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

Я использовал «ценности» в первой части, а не «ключ», так что это не возвращал данные обратно.

изменения в следующие работали:

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

Viplock, спасибо за вашу помощь, как я нашел:

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

очень полезно.

С уважением,

Шахин K