AngularJs指令用于交叉浏览器SELECT Dropdown

Question

我正在尝试创建以下跨浏览器下拉列表：

目前这是我的HTML：

var myapp = angular.module('myapp', []);
myapp.controller('myCtrl', function($scope) { //temporory stuff

  $scope.investments = [{
    "name": "AARPOperatingFunds"
  }, {
    "name": "SomeBigTitle"
  }, {
    "name": "IhatezIE8"
  }, {
    "name": "ILoveFFDeveLoperEdition"
  }, {
    "name": "GiveMeSomeLove"
  }];
  
  $scope.investment = $scope.investments[0].name;

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>

<div ng-app="myapp" ng-controller="myCtrl">

  <span class="dropdown">
      <i ng-bind="investment" class="before"></i>
      <select ng-model="investment">
        <option ng-repeat="ip in investments | orderBy:'name' " ng-value="ip.name">{{ ip.name }}</option>
      </select>
    </span>

</div>

但我需要的是，当有人选择下拉菜单时，ng-bind会更新，而且

1. 我不每次都想添加mg-model 。
2. 主要的是，如果OPTION值有时像“ AARPOperatingFunds ”，它应该显示为“ AARP运营资金”

请指导。我们是否可以出于上述目的在此创建任何指令。

我需要这样的东西：

<span class="dropdown">
  <i class="before" mySelectDirective></i>
  <select id="investProgram" ng-options="ip for ip in ips | orderBy:'ip' "></select>
</span>

或者这个：

<span class="dropdown mySelectDirective">
</span>

Answer 1

使用ng-options并在数组中添加“label”属性：

$scope.investments = [{
    "name": "AARPOperatingFunds",
    "label":"AARP Operating Funds"
 }, {
    "name": "SomeBigTitle",
    "label":"Some Big Title"
 }];

然后：

<select ng-model="investment" ng-options="opt.name as opt.label for opt in investments"></select>

https://docs.angularjs.org/api/ng/directive/select