gpt4 book ai didi

javascript - ng-options 值等于对象而不是值字符串

转载 作者:行者123 更新时间:2023-11-27 23:23:12 24 4
gpt4 key购买 nike

我正在构建一个小型 Angular(1.5) 应用程序,其中有两个链接的下拉菜单。第二个根据第一个下拉菜单更改其选项。除了一个小细节之外,一切都运转良好。在 HTML option 标签中,属性值等于 object:[some number] 而不是值本身。显示值( <option></option> 标签之间的值)正确显示。检查屏幕截图。我该如何制作value=""等于开始和结束标记之间显示的值吗?

enter image description here

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 }

最佳答案

我相信你想做的是:

    <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 在内部使用它来进行一些引用。真正重要的是传递给模型的实际值。

关于javascript - ng-options 值等于对象而不是值字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35207873/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com