如何使用来自不同控制器的选项在 Angular 中的 <select> 标签中预先设置 select 选项？

Question

我在这里使用两个控制器。一，productComponentsController，处理对我们数据库的调用，该调用返回一个 productComponent 对象数组。另一个 AddEditArticleController 控制 'Create New / Edit Existing Article' 页面。

在我的 Add/Edit 文章页面上，我希望 <select> 填充 productComponents，并且，如果我正在编辑现有文章，则需要 select 编辑了该文章的当前 productComponent。

虽然这看起来很简单，但我无法使用现有的 productComponent 使字段成为 select 之前的字段，尽管它确实用它们正确地填充了 <select>。我已经尝试过 ngRepeat 和 ngOptions，它们都可以用于填充下拉列表，但都不能用于预先 selecting 现有的 productComponentID 来自服务器返回的数组。

我的 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>

我的 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. -->

在我的 AddEditArticleController 中，我将 vm.selectedComponent 设置为等于数据库返回的文章的 productComponentID，在我调用的 promise.then() 中.虽然 vm.selectedComponent 确实发生了变化，但这对下拉菜单没有任何影响。

此外，在我生成的 HTML 中，我得到选项：<option value="? number:47 ?"></option>（对于 productComponentID = 47 的文章）。显然，这是由于将模型设置为未知值而发生的，但我不知道为什么将模型设置为整数 id 以外的任何值。

这是因为我的 select 正在访问多个控制器，还是我在这里遗漏了一些明显的东西？非常感谢任何帮助，如果需要更多信息，请告诉我。

Answer 1

我相信您正在寻找 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>

Answer 2

所以事实证明，因为模型必须是一个字符串，所以我必须在 vm.selectedOption 发生变化时将其转换为一个字符串（在本例中，在 vm.selectOption 函数中）使用String()。这是使用 ngRepeat。 ngInit 似乎与我的代码如何工作无关。

砰，就是这样，我的代码有效。

如何使用来自不同控制器的选项在 Angular 中的 <select> 标签中预先设置 select 选项？

How to pre-select option from <select> tag in Angular with options from a different controller?

angularjs

drop-down-menu

ng-repeat

ng-options