将事件 onClick 添加到下拉列表的最后一个元素

Question

假设我有一个下拉列表，我想向列表的最后一个元素添加一个 onClick 事件，例如：

伦敦
巴黎
米兰
添加新城市 +

ng-change 如果我在下拉列表中有多个元素，指令只会帮助我，否则如果我有这样的列表（只有一个元素）：

添加新城市 +

我永远无法将 onClick 事件设置为唯一的项目，因为它永远不会更改组合框的值。

更新

<select ng-model="customer.selectedCity"  ng-options="opt as opt.name for opt in customer.cityOptions"
  ng-init="model="customer.selectedCity"   = customer.cityOptions[0]"
  ng-change="onCustomerCitySelected(customer)" ></select>

Answer 1

您可以尝试像这样添加默认值：

<select ng-model="model2" ng-options="item for item in items2" ng-change="processItemChange(model2)">
      <option value="">Select Value From Items2</option>
</select>

所以现在您可以添加 ng-change 函数来定义新值是否为 add new value

演示：http://plnkr.co/edit/S4r1dhKFMutllESklLFA?p=preview

Answer 2

您完全可以不使用 ng-change 来实现这一点。考虑以下因素：

HTML模板

<select ng-model="selectedIndex"
        ng-options="index as name for (index, name) in menu"> 
</select>

JavaScript

app.controller('SelectCtrl', function($scope) {
  $scope.menu = ['London','Paris','Milan','Add new city+'];

  $scope.$watch('selectedIndex', function(val) {
    $scope.selectedCity = $scope.menu[val];      

    if (val == $scope.menu.length - 1) {
      $scope.addNewCity();
      $scope.selectedIndex = $scope.selectedCity = null;
    }
  });

  $scope.addNewCity = function() {
    alert('Add city from select');
  };
});

您也可以考虑使用 ui-bootstrap 下拉菜单。

HTML模板

<div class="btn-group" dropdown>
  <button type="button" 
          class="btn btn-primary">{{ vm.selectedCity || 'Not selected' }}
  </button>
  <button type="button" 
          class="btn btn-primary dropdown-toggle" 
          dropdown-toggle>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="item in vm.menu">
      <a ng-if="!$last" href="#" 
         ng-bind="item"
         ng-click="vm.selectedCity = item"></a> 
      <a ng-if="$last" href="#" 
         ng-bind="item"
         ng-click="vm.addNewCity()"></a>
    </li>
  </ul>
</div>

JavaScript

app.controller('DropdownCtrl', function() {
  var vm = this;
  vm.menu = ['London','Paris','Milan','Add new city+'];

  vm.addNewCity = function() {
    alert('Add city from dropdown');
    vm.selectedCity = null; 
  };
});

上面的例子会导致这样的结果

此处包含所有代码的相关插件http://plnkr.co/edit/szA1pt

将事件 onClick 添加到下拉列表的最后一个元素

add event onClick to the last element of a dropdown

dropdownbox

angularjs

演示：http://plnkr.co/edit/S4r1dhKFMutllESklLFA?p=preview