如何默认选择动态下拉列表？

Question

在我的代码中，我列出了一些用户记录。有一列要更改produced by该列存在一个下拉列表。我的ng-change工作正常。页面刷新后没有填充下拉列表我上次更改。请检查我的代码 -

身份

<select name="repeatSelect" id="repeatSelect" ng-model="model_produced_by" style="width: 62px;" ng-change="change_produced_by(model_produced_by, order.Order.id)">
     <option value="">Select Produced By</option>
     <option ng-repeat="option in produced_by.availableOptions" value="{{option.id}}" ng-selected="option.id == order.Order.assigned_to">{{option.name}}</option>
</select>

输出 -

<select ng-change="change_produced_by(model_produced_by, order.Order.id)" style="width: 62px;" ng-model="model_produced_by" id="repeatSelect" name="repeatSelect" class="ng-pristine ng-valid ng-empty ng-touched">
   <option value="">Select Produced By</option>
   <option ng-selected="option.id == order.Order.assigned_to" value="1" ng-repeat="option in produced_by.availableOptions" class="ng-binding ng-scope">Outsourced</option>
   <option ng-selected="option.id == order.Order.assigned_to" value="2" ng-repeat="option in produced_by.availableOptions" class="ng-binding ng-scope">In-House</option> 
  <option ng-selected="option.id == order.Order.assigned_to" value="3" ng-repeat="option in produced_by.availableOptions" class="ng-binding ng-scope">Local Store/Printer</option>
</select>

我想选择与option.id == order.Order.assigned_to相等的值，但我的代码无效。 我还在ng-init标记中使用了select。最后一个选项显示在每个下拉列表中。请检查并告诉我哪里出错。

Answer 1

您应该只使用ngOptions和ngModel：

<select name="repeatSelect" id="repeatSelect" style="width: 62px;" 
    ng-model="order.Order.assigned_to"         
    ng-change="change_produced_by(model_produced_by, order.Order.id)"
    ng-options="option.id as option.name for option in produced_by.availableOptions">
     <option value="">Select Produced By</option>
</select>

Answer 2

为了正确操作select，你需要指定属性ng-modal，看看这个例子：

<select id="inptAdmin" name="inptAdmin" class="form-control" 
  ng-model="res.adminUser.id" ng-options="user.id as user.name + ' - ' + user.email for user in listUser" required="required">
</select>

在我的控制器中，我拥有一个属性listUser，它有一个用户对象列表，但在ng-options中我指定想要使用这些对象的id作为值，并在ng-modal中指定它在哪里将保存值select。在这个例子中，如果＆＃39; res.adminUser.id＆＃39;从填充，将自动选择选择中的相应值。

我希望我能帮忙。

Answer 3

我不知道角度js，但我理解你的问题。如果你能以某种方式执行此操作，你将摆脱你的问题。您需要为选定的选项2生成以下下拉列表html：

<select ng-change="change_produced_by(model_produced_by, order.Order.id)" style="width: 62px;" ng-model="model_produced_by" id="repeatSelect" name="repeatSelect" class="ng-pristine ng-valid ng-empty ng-touched">
   <option value="">Select Produced By</option>
   <option value="1" ng-repeat="option in produced_by.availableOptions" class="ng-binding ng-scope">Outsourced</option>
   <option ng-selected="true" value="2" ng-repeat="option in produced_by.availableOptions" class="ng-binding ng-scope">In-House</option> 
  <option value="3" ng-repeat="option in produced_by.availableOptions" class="ng-binding ng-scope">Local Store/Printer</option>
</select>

如果您可以根据您的条件在运行时生成html，您可以这样做....这里我编写代码的示例方式可能在角度上不同：

<select name="repeatSelect" id="repeatSelect" ng-model="model_produced_by" style="width: 62px;" ng-change="change_produced_by(model_produced_by, order.Order.id)">
     <option value="">Select Produced By</option>
     <option ng-repeat="option in produced_by.availableOptions" value="{{option.id}}" (option.id == order.Order.assigned_to) ? ng-selected="true":"">{{option.name}}</option>
</select>

希望这可以解决您的问题。