angularjs 有界选择元素的Angular NG选项

9bfwbjaz  于 2022-10-31  发布在  Angular
关注(0)|答案(1)|浏览(203)

我几乎做到了,但有一个小细节卡住了。我似乎不能让所选汽车制造商的“汽车型号”的“名称”属性实际上显示在选择菜单上。目前,它似乎显示了正确的选项数量,但选项明显是空白的。下面是我的代码,以帮助更好地解释...

$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选择选项,但没有显示“name”吗?谢谢!

xlpyo6sf

xlpyo6sf1#

你想要这样的东西:

<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将等于模型对象。因此,如果用户选择“雅阁”,则在您的控制器中:

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

在进行选择后将评估为true。

相关问题