帶有JSON對象數組的AngularJS級聯下拉菜單

Question

我正在嘗試使用級聯下拉列表來了解控制器在angularjs中的工作方式。 但是我的第二個下拉列表並未根據先前的下拉列表值進行填充。

我的JSON搜尋結果：

[{
    "id": "23031",
    "fabricante": "ALFA ROMEO",
    "modelo": "33",
    "motor": "1.3 \/ 1.3 ie",
    "combustivel": "Gasolina \/ GNV",
    "ano_vela": "",
    "ngk": "",
    "ngk_green": "BPR6EY",
    "gap": "0,7",
    "ano_cabo": "",
    "cabos_ngk": "",
    "inicio": "",
    "fim": "",
    "seguimento": "4 RODAS",
    "ano_bobina": "",
    "bobina_ngk": "",
    "pais": "Argentina",
    "n_processo": "0"
}, {
    "id": "23057",
    "fabricante": "ARO",
    "modelo": "Serie 10",
    "motor": "1.4",
    "combustivel": "Gasolina \/ GNV",
    "ano_vela": "",
    "ngk": "BP6HS",
    "ngk_green": "",
    "gap": "0,7",
    "ano_cabo": "",
    "cabos_ngk": "",
    "inicio": "",
    "fim": "",
    "seguimento": "4 RODAS",
    "ano_bobina": "",
    "bobina_ngk": "",
    "pais": "Argentina",
    "n_processo": "0"
}]

我的控制器已編輯 ：

angular.module('starter.controllers', [])

.controller('fabricanteController', ['$scope','$http', function($scope, $http) {
$http.get('JSON_PATH').success(function (data) {
    $scope.fabricantes = data;
    $scope.$watch('fabricante', function(newVal) {
    if (newVal) $scope.modelo = data;
    console.log($scope.modelo);
});
});
}]);

而我的HTML：

<label class="item item-input item-select">
    <div class="input-label">
        Fabricante
    </div>
    <select ng-model="fabricante" ng-options="fab.fabricante for fab in fabricantes track by fab.fabricante">
        <option value="" disabled="disabled">Selecionar</option>
    </select>
</label>

<label class="item item-input item-select">
    <div class="input-label">
        Modelo
    </div>
    <select ng-model="modelo" ng-options="mod.modelo for mod in fabricantes">
        <option value="" disabled="disabled">Selecionar</option>
    </select>
</label>

試圖環顧四周如何使其運作，但沒有運氣。 知道為什么嗎？

Answer 1

您的手表沒有觸發，因為您傳遞的是字符串而不是變量。 另外，我不知道您要在哪里檢查newVal，但是那樣行不通。

基本實現：

$scope.$watch($scope.fabricante, function() {
    $scope.modelo = data;
    console.log($scope.modelo);
});

使用newVal檢查：

$scope.$watch($scope.fabricante, function() {
    if($scope.modelo!=data)
    {
      $scope.modelo = data;
      console.log($scope.modelo);
    }

});

您還可以在“選擇”框上使用ng-change，它會在發生任何更改時觸發。

<select ng-model="fabricante" ng-change="doSomething()" ng-options="fab.id for fab in fabricantes"></select>

Answer 2

如果要顯示所選'fabricante'對象的'modelo'屬性，則必須將第二個DDL的ng-option指向新的$scope數組變量，例如：

$scope.modelos = [{"modelo": newVal.modelo}];

您的ng-options應該是：

<select ng-model="test" ng-options="mod.modelo for mod in modelos">

這是一個正在工作的JSFiddle

希望這可以幫助。