如何將自定義選項添加到ng選項輸出？

我在一個表中創建了一個select，從列表中獲取一些電子郵件地址。這裏是代碼：如何將自定義選項添加到ng選項輸出？

<td> 
    <select ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]" class="form-control" ng-model="selectedEmail" ng-options="item as item.dest for item in emails"></select> 
</td>

我會添加一個額外的選項，將爲最終用戶的自定義選項。如果我中<select>添加<option>它是由角ng-options

<td> 
    <select ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]" class="form-control" ng-model="selectedEmail" ng-options="item as item.dest for item in emails"> 
     <option value="custom">Custom</option> 
    </select> 
</td>

覆蓋我如何可以添加自定義選項？

我的目的是爲用戶添加一個「自定義」選項：如果他們選擇該選項，他們可以寫下他們自己的選擇，一個自定義文本。

來源

2015-12-17 smartmouse

這個問題已經在這裏找到答案：http://stackoverflow.com/questions/22312150/angularjs-add-a-static-option-with-ng-options –

那解決方案引入了一個空白選項... – smartmouse

有幾種方法可以解決這個問題。如果你想繼續使用ng-options，你可以使用一個功能。

HTML

<td> 
    <select 
     ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]" 
     class="form-control" 
     ng-model="selectedEmail" 
     ng-options="item as item.dest for item in BuildList()"></select> 
</td> 

<input type="text" placeholder="Enter Custom Option" ng-model="customText" />

控制器功能的BuildList

$scope.BuildList = function() { 

    if(!$scope.customText) { 
     return $scope.emails; 
    } 
    var newList = angular.copy($scope.emails); 
    newList.push({someobjectbuildUsingCustom}); 

    return newList ; 
}

來源

2015-12-17 14:03:02 Malkus

我的目的是爲用戶添加一個「自定義」選項：如果他們選擇該選項，他們可以寫下他們自己的選擇，自定義文本（我已更新我的問題）。 – smartmouse

而不是ng-options屬性中的「emails」，使用「getEmails」函數，根據上下文返回不同的列表。 – Digix

@smartmouse我更新了我的答案，建立一個更像你正在尋找的列表。這將允許你訂購清單，但你想 – Malkus

-2

你可以使用這個語法：

<select> 
    <option ng-repeat="(key, value) in emails" value="{{key}}">{{value}}</option> 
    <option ... custom option ...>...</option> 
</select>

來源

2015-12-17 14:13:01 Digix

不起作用。任何對「自定義選項」的引用？ – Nati

你可以做下面的每個：

<div ng-controller="TestController"> 
    {{sel}} 
    <select ng-model="sel" ng-options="d.value as d.label for d in data"> 
    <option value="">any</option> 
    </select> 
</div>

看到這個fiddle以及

來源

2015-12-17 14:13:36 Jax

這似乎是解決方案，但請告訴我爲什麼它的工作原理。例如，如果我爲'value'添加一個值，爲什麼它顯示一個空白選項？ – smartmouse

如果您查看生成的html，這些值由ng-options分配，您手動添加一個外部值，干擾由ng-options分配的id，此id是數據數組中的索引。希望能爲你澄清一點。 – Jax

是的，很明顯。是否可以在選項列表的末尾移動附加選項？ – smartmouse

如何將自定義選項添加到ng選項輸出？

回答

相關問題