有界选择元素的角度 ng-options

Question

我快到了，但停留在一个小细节上。我似乎无法让所选汽车制造商的“汽车型号”的“名称”属性实际显示在选择菜单上。目前，它似乎显示了正确的选项数量，但选项显然是空白的。这是我的代码以帮助更好地解释...

$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 选择选项，“名称”也没有显示？谢谢！

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

在做出选择后将评估为真。