Question

我几乎在那里，但坚持一个小细节。我似乎无法获得所选Car Make的“汽车模型”的“名称”属性，以实际显示在选择菜单上。目前，它似乎显示了正确的选项数量，但选项明显是BLANK。这是我的代码，以帮助更好地解释...

$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将等于模型对象。因此，如果用户选择＆＃34; Accord＆＃34;然后在你的控制器中：

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

选择完成后，

将评估为真。

有界选择元素的Angular ng-options

1 个答案: