使用 AngularJS 中的 ng-options 添加两个选项到 select 列表顶部和底部

Question

我正在尝试使用 Angular 在 cshtml 页面中填充下拉列表。 Angular controller 使用 Web API 到 return 值调用服务。我添加了一个默认的 selected 项目来指示用户 select 列表中的项目。我还想将 'Other' 附加到 select 列表的末尾。

如果可以的话，我更喜欢使用 ng-options。我知道如何使用 ng-repeat.

标记如下：

<div class="formElement">
  <label for="companySelect" class="required long">{{'CompanyName'}}</label>
  <select name="companySelect" id="companySelect" ng-change="selectCompany()" ng-model="data" data-ng-options="company.CompanyName 
    for company indata.companySelect | orderBy:'CompanyName' track by company.CompanyName">
    <option value="">Please Select</option>
    <option value ="other">Other</option>
  </select>
</div>

Answer 1

我想如果你的 webapi return 一些 json 数据，你通过 $scope.company 在你的 angular 控制器

中获得了这些值

将 Please Select 添加到数组的顶部元素

你可以使用数组 unshift

$scope.company.unshift("Please Select")// May it be a object

将 Others 添加到数组的底部元素

你可以使用数组push

$scope.company.push("Other")// May it be a object

Answer 2

我通过对 Web 中的数据进行排序 Api 解决了这个问题，然后在末尾添加了一个名称为 other 的新公司类型。这使列表按排序顺序排列，并为我提供了其他信息。我希望在 AngularJS 内找到一个简单的解决方案，但所提供的解决方案并未考虑到对排序列表的需求。感谢您的建议，我意识到我没有指出列表已排序，但在我发布的 html 中很容易看到。

使用 AngularJS 中的 ng-options 添加两个选项到 select 列表顶部和底部

Add two options to select list top and bottom using ng-options in AngularJS

asp.net-mvc-4

angularjs

angularjs-ng-options