mehrere Cascading Dropdown mit Angular & MVC

Question

Zunächst entschuldigt, dass Beitrag sieht ein bisschen langatmig (es ist nur Code wiederholt, so sieht länger aus als es ist). Ich versuche, ein mehrstufiges Dropdown-Menü zu implementieren - es funktioniert gut für die erste und erste Ebene (COLUMN1 & COLUMN2), aber nicht für COLUMN3. Hier

ist die Steuerung:

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

Hier ist die 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; 
      }); 
    }; 
}; 

Schließlich ist hier die html/Winkel:

<!-- 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 tatsächlich leer zurückkehrt, wenn es ist Daten in der Datenbank.

Wenn Sie wissen, warum Col3Data nichts zurückgibt, würde Ihre Hilfe am meisten geschätzt werden.

Vielen Dank

Shaheen

Answer 1

Wenn es einige Problem sein, mit nicht gearbeitet verdauen Zyklus, können Sie i mit $scope.$apply() wie aktualisieren versuchen gefunden Für das Senden von Daten

$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

Ok aus, was das Problem war. Wenn Sie folgendermaßen vorgehen:

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

ich für den ersten Teil ‚Werte‘ wurde mit eher als ein ‚Schlüssel‘, so wurde diese wieder keine Daten zurück.

Wechsel zum gearbeitet folgende:

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

sehr hilfreich:

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

Viplock, vielen Dank für Ihre Hilfe, wie ich gefunden habe.

Grüße,

Shaheen K