Question

我编写了以下代码：

<select
    data-ng-disabled="!option.selectedSubject"
    data-ng-model="option.selectedContentStatus"
    data-ng-options="item.id as item.status for item in option.contentStatuses">
    <option style="display: none" value="">Select Content Status</option>
</select>

这给我一个供我选择的状态列表。但是我想在列表中添加一个值为“99”且名称为“All”的附加内容。为此，我尝试了：

<select
    data-ng-disabled="!option.selectedSubject"
    data-ng-model="option.selectedContentStatus"
    data-ng-options="item.id as item.status for item in option.contentStatuses">
    <option style="display: none" value="">Select Content Status</option>
    <option value="99">All</option>
</select>

但这不起作用。我看到的只有选择内容状态和附加选项99 All不会出现。

如果不更改数组option.contentStatuses，有没有办法让这个附加选项成为可能？

Answer 1

您可以通过选择中静态选项值旁边的数据对要生成的选项执行ng-repeat：

<select ng-model="option.selectedContentStatus">
    <option value="">Select Content Status</option>
    <option value="99"> All </option>
    <option ng-repeat="item.id as item.status for item in option.contentStatuses" value="{{item.id}}">{{item.status}}</option>
</select>

Answer 2

您可以编写一个指令，在下拉列表中添加额外的“全部”选项。

html：

<select add-option-all
    data-ng-disabled="!option.selectedSubject"
    data-ng-model="option.selectedContentStatus"
    data-ng-options="item.id as item.status for item in option.contentStatuses">
    <option style="display: none" value="">Select Content Status</option>
</select>

指令：

app.directive('addOptionAll',
   function($timeout) {
      return {
         link : function(scope, element, attrs) {
            // use $timeout if you want to add "All" at the bottom else dont use                
            $timeout(function(){
                element.append("<option value='99'>All</option>");
            }, 1000);
       }
   };
});

如何在不更改数据源的情况下向AngularJS <select>添加值？</select>

2 个答案: