Question

我在这里使用两个控制器。一，productComponentsController，处理对我们的数据库的调用，该数据库返回一个productComponent对象数组。另一个是AddEditArticleController，它控制着“创建新/编辑现有文章”页面。在我的添加/编辑文章页面上，我想要一个＆lt; select＆gt;填充productComponents，如果我正在编辑现有文章，则使用该文章的当前productComponent进行预选。这看起来很简单，我不能使用现有的productComponent预先选择字段，尽管它确实填充了＆lt; select＆gt;与他们正确。我已经尝试过ngRepeat和ngOptions，它们都用于填充下拉列表，但是它们都不能用于从服务器返回的数组中预先选择现有的productComponentID。我的HTML，使用ngOptions：＆lt;！ - productComponentsController as pvm，AddEditArticleController as vm - ＆gt; ＆lt; select id =“componentBox” NG-模型= “vm.selectedComponent” placeholder =“选择产品组件” NG-变化= “vm.changeProductID（）” class =“form-control input-md” ng-options =“component.name for component in pvm.productComponents track by component.id”＆gt;＆lt; / select＆gt; 我的HTML，使用ngRepeat：＆lt;！ - productComponentsController as pvm，AddEditArticleController as vm - ＆gt; ＆lt; select id =“componentBox” NG-模型= “vm.selectedComponent” placeholder =“选择产品组件” NG-变化= “vm.changeProductID（）” class =“form-control input-md”＆gt; ＆lt; option value =“{{component.id}}” ng-repeat =“pvm.productComponents中的组件” NG-选定= “vm.selectOption（component.id）” NG-绑定-HTML = “component.name” ＆GT;＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆lt ;! - vm.selectOption（）如果当前选项的ID等于当前文章的productComponentID，则返回true。因此，将选择此选项。 - ＆GT; 在我的AddEditArticleController中，我将vm.selectedComponent设置为等于我的调用的promise.then（）中数据库返回的Article的productComponentID。虽然vm.selectedComponent确实发生了变化，但这对下拉列表没有任何作用。另外，在我生成的HTML中，我得到了选项：＆lt; option value =“？number：47？”＆gt;＆lt; / option＆gt; （对于productComponentID为= 47的文章）。显然，这是由于模型被设置为未知值而发生的，但我不知道为什么模型将被设置为除整数id之外的任何值。这是因为我的选择是访问多个控制器，还是我错过了一些明显的东西？非常感谢任何帮助，如果需要更多信息，请告诉我。

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函数） 1}}。这是使用ngRepeat。 ngInit似乎与我的代码的工作原理无关。

轰动，就是这样，我的代码也能运作。

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

2 个答案: