ng-options值等於對象而不是值字符串

Question

我正在構建一個鏈接兩個下拉菜單的小型Angular（1.5）應用程序。第二個根據第一個下拉菜單更改選項。這一切都很好，期待一個小細節。在HTML選項標籤中，屬性值等於object：[some number]而不是值本身。顯示值（<option>和</option>標籤之間的值）正確顯示。檢查屏幕截圖。我如何使value=""等於它在開始和結束標記之間顯示的相同值？

HTML文件：

<div ng-app="App" ng-controller="app-controller"> 
    <select id="brand" 
    ng-model="input.selected_brand" 
    ng-options="a for (a,b) in data" 
    > 
    <option value="" disabled selected>Selection 1</option> 
    </select> 

    <select id="model" 
    ng-model="input.selected_model" 
    ng-options="a.model for a in input.selected_brand" 
    > 
    <option value="" disabled selected>Selection 2</option> 
    </select> 
</div> 

JS文件：

var App = angular.module("App", []) 
.controller('app-controller',function($scope,$http){ 
    // Fetch JSON data 
    $http.get('data/data.json').then(function(res){ 
    $scope.data = res.data; 
    $scope.selected_brand = $scope.data; 
    }); 
}); 

JSON文件：

{ 
    "BMW" : [ 
    { 
     "model" : "M3 CRT" 
    }, 
    { 
     "model" : "M5" 
    }, 
    { 
     "model" : "M3 GTS" 
    }, 
    { 
     "model" : "M3 Coupe DCT" 
    }, 
    { 
     "model" : "M3 F80" 
    }, 
    { 
     "model" : "M6 Coupe" 
    }, 
    { 
     "model" : "M5/M6 CP" 
    }, 
    { 
     "model" : "X5/X6 M" 
    }, 
    { 
     "model" : "M6 Gran Coupe" 
    }, 
    { 
     "model" : "M3 E30" 
    } 
    ], 
    "Mercedes" : [ 
    { 
     "model" : "SL 65 AMG" 
    }, 
    { 
     "model" : "600 Pullman" 
    }, 
    { 
     "model" : "C111" 
    }, 
    { 
     "model" : "190E 2.5-16 EII" 
    }, 
    { 
     "model" : "SLR McLaren Stirling Moss" 
    }, 
    { 
     "model" : "Patent-Motorwagen" 
    }, 
    { 
     "model" : "500E" 
    }, 
    { 
     "model" : "CLK GTR" 
    }, 
    { 
     "model" : "300 SL" 
    } 
    ], 
    "Lamborghini" : [ 
    { 
     "model" : "Espada" 
    }, 
    { 
     "model" : "Jalpa" 
    }, 
    { 
     "model" : "Urraco" 
    }, 
    { 
     "model" : "Reventon" 
    }, 
    { 
     "model" : "Gallardo" 
    }, 
    { 
     "model" : "Sesto Elemento" 
    }, 
    { 
     "model" : "Diablo" 
    }, 
    { 
     "model" : "Countach" 
    }, 
    { 
     "model" : "Veneno" 
    }, 
    { 
     "model" : "Miura" 
    } 
    ], 
    "Audi" : [ 
    { 
     "model" : "RS2" 
    }, 
    { 
     "model" : "TT" 
    }, 
    { 
     "model" : "Le Mans" 
    }, 
    { 
     "model" : "R18 E-Tron" 
    }, 
    { 
     "model" : "Union Type D" 
    }, 
    { 
     "model" : "RS6 Avant" 
    }, 
    { 
     "model" : "Horch 26/65" 
    }, 
    { 
     "model" : "DKW Monza" 
    }, 
    { 
     "model" : "R8" 
    }, 
    { 
     "model" : "Quattro" 
    } 
    ], 
    "Ford" : [ 
    { 
     "model" : "Mustang Byllitt" 
    }, 
    { 
     "model" : "Boss 429" 
    }, 
    { 
     "model" : "SVT Cobra" 
    }, 
    { 
     "model" : "Fairlane Thunderbolt" 
    }, 
    { 
     "model" : "Focus RS" 
    }, 
    { 
     "model" : "Falcon 351" 
    }, 
    { 
     "model" : "Ford Mustang" 
    }, 
    { 
     "model" : "Cobra R" 
    }, 
    { 
     "model" : "Shelby GT350" 
    }, 
    { 
     "model" : "Ford GT" 
    } 
    ], 
    "Honda" : [ 
    { 
     "model" : "S200 CR" 
    }, 
    { 
     "model" : "Jackson Turbo" 
    }, 
    { 
     "model" : "Accord Coupe" 
    }, 
    { 
     "model" : "Civic Si" 
    }, 
    { 
     "model" : "Prelude VTEC" 
    }, 
    { 
     "model" : "Civic Mugen" 
    } 
    ], 
    "Mazda" : [ 
    { 
     "model" : "Mazda Carol" 
    }, 
    { 
     "model" : "Rotary Pickup" 
    }, 
    { 
     "model" : "Atenza" 
    }, 
    { 
     "model" : "Savanna" 
    }, 
    { 
     "model" : "RX-8" 
    }, 
    { 
     "model" : "Eunos Cosmo" 
    }, 
    { 
     "model" : "Autozam AZ-1" 
    }, 
    { 
     "model" : "Cosmo L10B" 
    }, 
    { 
     "model" : "MX-5 Miata" 
    }, 
    { 
     "model" : "RX-7" 
    } 
    ] 
} 

我之所以走線槽，這是因爲我有

$scope.submit = function(input){ 
    $scope.input_data = angular.copy(input); 
    console.log($scope.input_data); 
    } 

這就需要正確的價值觀才能正常工作，在當前狀態下的console.log輸出看起來是這樣的：

Object { selected_brand: Array[10], selected_model: Object } 

Answer 1

我相信你想要做的是：

<select id="brand" 
    ng-model="input.selected_brand" 
    ng-options="a as a for (a,b) in data" 
    > 
    <option value="" disabled selected>Selection 1</option> 
    </select> 

    <select id="model" 
    ng-model="input.selected_model" 
    ng-options="a.model as a.model for a in data[input.selected_brand]" 
    > 
    <option value="" disabled selected>Selection 2</option> 
    </select> 

而且，您不必擔心生成的代碼中的值，因爲angularjs在內部使用它來創建一些引用。真正重要的是傳遞給模型的實際價值。