在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

添加a没有问题,ng-model因为这有助于您使用其值.例如:

<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.

更新

在更新了更多描述的问题后,您有两个选择:

选项1(推荐)

你可以像这样写(虽然,你可以在HTML本身实现很多,但在控制器中更干净):

$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>