如何默認選擇動態下拉？

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中的對應值。

我希望我能幫上忙。