如何默认选择动态下拉？

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平等的，但我的代码是行不通的。 此外，我在select标记中使用了ng-init。最后一个选项显示在每个下拉菜单中。请检查并告诉我错误在哪里。

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

我不知道js的角度，但我明白你的问题。如果你能以某种方式执行这个操作，你将摆脱你的问题。你需要生成以下下拉HTML代码中选择选项2：

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

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

Answer 3

对于选择正确的操作，需要指定属性NG-模式，看看下面这个例子：

<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中指定它将保存的值选择。在这个例子中，如果'res.adminUser.id'被填充，将自动选择select中的对应值。

我希望我能帮上忙。