javascript - 在angularjs中更改选择选项时调用函数

Question

我有一个下拉菜单(选择、选项)，并且使用 ng-repeat 动态填充选项。我想在更改选项时调用 $scope 中的函数。这是 HTML

<div class="type-style" ng-show="accountCount > 3">
     <select class="account-filter">
          <option ng-repeat="account in getCustomerName() track by $index" ng-class="(account | limitTo: 18)" ng-bind="account.split('|')[0]"></option>
     </select>
</div>

我知道我们可以使用 ng-change，但是 ng-change 需要 ng-model 而我不认为 ng-model 在我的例子中是需要的。谁能帮忙？

正如您在代码中注意到的那样，我正在对选项标签执行 ng-repeat。那么我会在 select 标签中得到我在 ng-repeat 中使用过的那个“帐户”吗？这样我就可以在 ng-model 中使用它了？

此外，每个帐户都是一个字符串，由 3 个值以“|”分隔。当我在 ng-change 上调用一个函数时，我想用它传递第二个值。

例如:每个帐户都有名称 |编号 | 2号。现在在 ng-repeat 中我只是显示名称，如你所见，我在 ng-bind 中做了一个拆分。因此，如果我在 select 标签中使用 ng-model，我将只获取名称。但我希望将数字作为函数中的参数传递。

Answer 1

添加 ng-model 没有问题，因为这将帮助您使用它的值(value)。例如:

<select class="account-filter" ng-change="customerSelected()" ng-model="selectedCustomer">
      <option ng-repeat="account in getCustomerName() track by $index"
          ng-class="(account | limitTo: 18)"
          ng-bind="account.split('|')[0]"
          value="{{account}}"></option>
</select>

现在您只需通过 $scope.selectedCustomer 即可在您的 Controller 中读取所选客户的值。

更新

用更多描述更新问题后，您有两个选择:

方案一(推荐)

你可以这样写(虽然，你可以在 HTML 本身中实现大部分，但在 Controller 中这样做更干净):

$scope.customerSelected = function() {
     var selectedCustomer = $scope.selectedCustomer;
     if (!selectedCustomer) {
          alert("Please select a customer");
          return;
     }

     var secondId = selectedCustomer.split('|')[2];
     // You can directly put your main logic here but since you want to
     // call a separate method with passing the id
     $scope.doSomethingWithCustomer(secondId);
};

$scope.doSomethingWithCustomer = function(id) {
    // Your main logic here after selecting the customer
};

并按照我上面的描述修改您的 HTML:

<select class="account-filter" ng-change="customerSelected()" ng-model="selectedCustomer">
      <option ng-repeat="account in getCustomerName() track by $index"
          ng-class="(account | limitTo: 18)"
          ng-bind="account.split('|')[0]"
          value="{{account}}"></option>
</select>

选项 2(不太清洁)

$scope.doSomethingWithCustomer = function(id) {
    // Your main logic here after selecting the 2nd customer
};

并将您的 HTML 修改为:

<select class="account-filter" ng-model="selectedCustomer"
    ng-change="doSomethingWithCustomer(selectedCustomer.split('|')[2])">
      <option ng-repeat="account in getCustomerName() track by $index" ng-class="(account | limitTo: 18)" ng-bind="account.split('|')[0]" value="{{account}}"></option>
</select>

选项 3

如果你想在没有 ng-model 和 jQuery 的情况下实现它，那么你可以使用一个指令:

请参阅下面的工作示例。

var a = angular.module("sa", [])

a.controller("foobar", function($scope) {
  $scope.getCustomerName = function() {
    return ['Foo', 'Bar'];
  };

  $scope.customerSelected = function() {
    console.log("I'm changed");
    alert("I'm changed");
  };
});

a.directive("changeMe", function() {
  return {
    scope: {
      changeMe: '&'
    },
    link: function($scope, element, attr) {
      element.on("change", function() {
           $scope.changeMe();
      })
    }
  }
});

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

<div ng-app="sa" ng-controller="foobar">
  <select class="account-filter" change-me="customerSelected()">
    <option ng-repeat="account in getCustomerName() track by $index" ng-class="(account | limitTo: 18)" ng-bind="account.split('|')[0]"></option>
  </select>
</div>