[英]How to pre-select option from <select> tag in Angular with options from a different controller?
I'm using two controllers here. 我在这里使用两个控制器。 One, productComponentsController
, handles a call to our database that pulls back an array of productComponent
objects. 其中一个是productComponentsController
,它处理对我们数据库的调用,该调用将拉回productComponent
对象的数组。 The other, AddEditArticleController
, controls the 'Create New / Edit Existing Article' page. 另一个AddEditArticleController
,控制“创建新的/编辑现有文章”页面。
On my Add/Edit Article page, I want a <select>
to populate with productComponents
, and, if I am editing an existing Article, to be pre-selected with that Article's current productComponent
. 在我的“添加/编辑文章”页面上,我希望<select>
填充有productComponents
,并且,如果我正在编辑现有文章,则希望与该文章的当前productComponent
一起预先选择。
Simple as this seems, I cannot make the field pre-select with the existing productComponent
, though it does populate the <select>
with them correctly. 看起来很简单,我不能使用现有的productComponent
来使该字段预先选择,尽管它确实用它们正确填充了<select>
。 I've tried ngRepeat and ngOptions and both work for populating the dropdown, but neither works for pre-selecting the existing productComponentID
from the array returned by the server. 我试过了ngRepeat和ngOptions,它们都可以用来填充下拉列表,但是都不能从服务器返回的数组中预选择现有的productComponentID
。
My HTML, using ngOptions: 我的HTML,使用ngOptions:
<!-- productComponentsController as pvm, AddEditArticleController as vm --> <select id="componentBox" ng-model="vm.selectedComponent" placeholder="Select a Product Component" ng-change="vm.changeProductID()" class="form-control input-md" ng-options="component.name for component in pvm.productComponents track by component.id"></select>
My HTML, using ngRepeat: 我的HTML,使用ngRepeat:
<!-- productComponentsController as pvm, AddEditArticleController as vm --> <select id="componentBox" ng-model="vm.selectedComponent" placeholder="Select a Product Component" ng-change="vm.changeProductID()" class="form-control input-md"> <option value="{{component.id}}" ng-repeat="component in pvm.productComponents" ng-selected="vm.selectOption(component.id)" ng-bind-html="component.name"></option> </select> <!-- vm.selectOption() returns true if the current option's ID equals the productComponentID of the current Article. Therefore this option would be selected. -->
In my AddEditArticleController
, I set vm.selectedComponent equal to the productComponentID
of the Article that was returned by the database, in the promise.then() of my call. 在我的AddEditArticleController
,在AddEditArticleController
,将vm.selectedComponent设置为等于数据库返回的Article的productComponentID
。 While vm.selectedComponent
does change, this doesn't do anything to the dropdown. 尽管vm.selectedComponent
确实发生了变化,但这对下拉列表没有任何作用。
Also, in my generated HTML, I get the option: <option value="? number:47 ?"></option>
(for an Article where the productComponentID is = 47). 另外,在生成的HTML中,我得到以下选项: <option value="? number:47 ?"></option>
(对于productComponentID为= 47的文章)。 Apparently this happens as a result of the model being set to an unknown value but I don't know why the model would be set to anything other than an integer id. 显然,这是由于将模型设置为未知值而导致的,但是我不知道为什么将模型设置为除整数id之外的任何值。
Is this because my select is accessing multiple controllers, or am I missing something obvious here? 这是因为我的选择正在访问多个控制器,还是我在这里遗漏了一些明显的东西? Any help is greatly appreciated, let me know if more info is needed. 非常感谢您的帮助,如果需要更多信息,请告诉我。
I believe you're looking for ng-init ... 我相信你正在寻找ng-init ...
<!-- productComponentsController as pvm, AddEditArticleController as vm --> <select id="componentBox" class="form-control input-md" placeholder="Select a Product Component" ng-change="vm.changeProductID()" ng-model="vm.selectedComponent" ng-init="vm.selectedComponent=productComponentID" ng-options="component as component.name for component in pvm.productComponents track by component.id"></select>
So it turns out that because the model has to be a string, I have to cast the vm.selectedOption
to a string whenever it's changed (in this case, in the vm.selectOption
function) using String()
. 事实证明,因为模型必须是字符串,所以每当使用String()
对其进行更改(在本例中,在vm.selectOption
函数中)时,我都必须将vm.selectedOption
转换为字符串。 This is using ngRepeat. 这是使用ngRepeat。 ngInit seems to have no bearing on how my code works. ngInit似乎与我的代码的工作方式无关。
Boom, that's it, and my code works. 就是这样,我的代码正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.