Angular 有界 select 元素的 ng-options

Question

我快完成了，但还停留在一个小细节上。我似乎无法让 selected Car Make 的 "Car Model" 的 "name" 属性实际显示在 select 菜单上。目前，它似乎显示了正确数量的选项，但这些选项显然是空白的。这是我的代码，可以帮助更好地解释...

$scope.carMakes = [
    {
        name: 'Honda',
        models: [{name:'Accord'}, {name: 'Civic'}, {name: 'CRX'}]
    },
    {
        name: 'Toyota',
        models: [{name:'Camry'}, {name: 'Forerunner'}]
    }
];

   <div class="input-group">
        <label>Vehicle Make</label>
        <select id="carMake" ng-model="carMake" ng-options="carMake as carMake.name for carMake in carMakes track by carMake.name">
            <option value="">All</option>
        </select>
    </div>
    <div class="input-group carModels">
        <label>Vehicle Model</label>
        <select id="carModel" ng-model="carMake.model" ng-options="carMake.model as carMake.model.name for carMake in carMake.models">
            <option value="">All</option>
        </select>
   </div>

谁能告诉我为什么即使显示了 carModel select 选项，"name" 也没有显示？谢谢！

Answer 1

你想要这样的东西：

<select id="carModel" ng-model="carMake.model" ng-options="carModel as carModel.name for carModel in carMake.models">
    <option value="">All</option>
</select>

我们使用 carModel.name 作为显示并将值设置为对象本身。所以在你的控制器中，$scope.carMake.model 将等于模型对象。因此，如果用户选择 "Accord"，那么在您的控制器中：

$scope.carMake.model.name === 'Accord' // True

选择后计算结果为真。

Angular 有界 select 元素的 ng-options

Angular ng-options for bounded select elements

select

options

angularjs

ng-options