[英]ng-model with association on select box with ng-repeat on options
I have a Plunker here illustrating my issue . 我这里有一个Plunker来说明我的问题 。 I have an object with an associated
division
. 我有一个带有相关
division
的对象。 There is no division_id
on the object, but in order to set or update the division
I need to set the division_id
field. 对象上没有
division_id
,但是为了设置或更新division
我需要设置division_id
字段。 Here's the sample object: 这是示例对象:
$scope.user = {
name: "John",
age: 32,
division: {
id: 3,
name: "Alpha"
}
};
And the example divisions: 以及示例划分:
$scope.divisions = [
{
name: "Gamma",
id: 1
},
{
name: "Alpha",
id: 3
},
{
name: "Beta",
id: 5
}
];
The way I'm building the select box is with ng-repeat
, which I was hoping would bypass the need to track ng-model for the selected value. 我构建选择框的方式是使用
ng-repeat
,我希望它可以绕过跟踪选定值的ng-model的需要。
<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>
As you can see in the demo, the selected
attribute is being placed on the right option, but still the select box display is blank. 如在演示中所见,
selected
属性被放置在正确的选项上,但选择框显示仍为空白。 Even if I add division_id: 3
to the object, it continues to be blank. 即使我向对象添加了
division_id: 3
,它仍然为空白。 How can I get this to work without having to do a conversion on the object when loading and updating? 在加载和更新时,如何在不对对象进行转换的情况下使它起作用?
Edit: To address this question being flagged as a duplicate, I think this is unique because I'm asking how to build the select box with ng-repeat
, not ng-options
. 编辑:要解决被标记为重复项的问题,我认为这是唯一的,因为我在问如何使用
ng-repeat
而不是ng-options
构建选择框。 Though the answer is similar to the answer for the proposed duplicate, I think other people might get stuck on this method and find it helpful to see the answer requires a different technique. 尽管答案与拟议重复的答案相似,但我认为其他人可能会卡在此方法上,并发现查看答案是否需要其他技术会有所帮助。
If you update your select as follows it will display by default to the users division.id. 如果您按以下方式更新选择,则默认情况下它将显示到用户division.id。
<select ng-model="user.division" ng-options="d as d.name for d in divisions track by d.id">
You seemed to be wanting to have a separate model division_id
, the only reason I can think of for this is that you wanted to control the persistence of the user
model when the selection is updated. 您似乎想拥有一个单独的模型
division_id
,为此我能想到的唯一原因是,您希望在更新选择内容时控制user
模型的持久性。 If for some reason you want to intercept the end-users selection to the user model (or even just the in-memory user object) being updated then use a copy/there are many ways to do that, but it's not clear if that's what you're asking. 如果出于某种原因您想截取最终用户对正在更新的用户模型(甚至只是内存中的用户对象)的选择,则可以使用副本/有很多方法可以做到这一点,但是尚不清楚这是什么你在问。
Note it would have worked to have kept the same option ng-repeat
syntax, but this is the recommended angular way to deal with options. 注意,保持相同的选项
ng-repeat
语法是可行的,但这是处理选项的推荐角度方法。
As per your plunker, you need to remove the ng-model directive from the select tag for it to work. 根据您的插件,您需要从select标记中删除ng-model指令才能使其正常工作。
if you need to set a division_id variable for your code, you can use ng-init. 如果您需要为代码设置一个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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.