我有Plunker here illustrating my issue。我有一个关联division_id
的对象。对象上没有division
,但为了设置或更新division_id
,我需要设置$scope.user = {
name: "John",
age: 32,
division: {
id: 3,
name: "Alpha"
}
};
字段。这是示例对象:
$scope.divisions = [
{
name: "Gamma",
id: 1
},
{
name: "Alpha",
id: 3
},
{
name: "Beta",
id: 5
}
];
示例部门:
ng-repeat
我正在构建选择框的方式是 <div class="form-group">
<label for="">Division</label>
<select type="text" ng-model="user.division_id">
<option ng-repeat="division in divisions"
ng-selected="user.division.id == division.id">{{ division.name }}</option>
</select>
</div>
,我希望这样可以避免跟踪所选值的ng-model的需要。
selected
正如您在演示中看到的那样,division_id: 3
属性被放置在右侧选项中,但选择框显示仍为空白。即使我向对象添加ng-repeat
,它仍然是空白的。如何在加载和更新时不必对对象进行转换,从而使其工作?
修改:要解决此问题被标记为重复的问题,我认为这是独特的,因为我问的是如何使用ng-options
构建选择框,而不是{{1} }。虽然答案类似于拟议副本的答案,但我认为其他人可能会对此方法感到困惑,并认为看到答案需要不同的技术会有所帮助。
答案 0 :(得分:0)
如果您按如下所示更新您的选择,它将默认显示给用户division.id。
ClickableQLabel
您似乎想要一个单独的模型<select ng-model="user.division" ng-options="d as d.name for d in divisions track by d.id">
,我能想到的唯一原因是您希望在更新选择时控制division_id
模型的持久性。如果由于某种原因你想要拦截最终用户选择到更新的用户模型(甚至只是内存中的用户对象)然后使用副本/有很多方法可以做到这一点,但它不是如果那是你要问的话,请说清楚。
请注意,它可以保留相同的选项user
语法,但这是处理选项的推荐角度方式。
答案 1 :(得分:0)
根据您的plunker,您需要从select标签中删除ng-model指令才能使其工作。
如果您需要为代码设置division_id变量,可以使用ng-init。
<div class="form-group">
<label for="">Division</label>
<select type="text">
<option ng-repeat="division in divisions"
ng-selected="user.division.id == division.id"
ng-init="division_id=division.name">{{ division.name }}
</option>
</select>
</div>