Question

这是我的选择元素：

 <select class="small-3 columns end statSelect"
          ng-model="chart.categoryAxis"
          ng-change="renderMainChart()"
          ng-options="metric as metric.value for metric in chart.metrics()">
  </select>

我每次单击按钮时都会以编程方式更改chart.categoryAxis。但是，ng-change方法renderMainChart（）不会被调用。这是为什么？

以下是其中一个选项的示例：

<option label="Ad Started" value="object:33">Ad Started</option>

根据我单击的按钮，可以适当地更改ng-model值。但是ng-change函数renderMainChart（）并没有被调用。

Answer 1

Aelliott1485的答案可以实施，但它需要你添加一个额外的手表，这可能不是一件好事。

如果您使用的是Angular 1.3或更高版本，则可以将函数传递给ng-model指令。

这允许您在ng-model属性中指定方法而不是变量。该方法应该采用可选参数。如果传递了一个参数，它应该存储该值，如果没有传递参数，它应该返回一个值。

在这种情况下，更改ng-model以调用函数而不是访问属性。

<select class="small-3 columns end statSelect"
      ng-model="chart.categoryAxis()"
      ng-change="renderMainChart()"
      ng-options="metric as metric.value for metric in chart.metrics()">    
</select>

并在控制器中编写这样的函数

$scope.categoryAxis = function(value) {
    $scope.ca = value || $scope.ca; // You can also keep a local variable inside the controller instead of a property on $scope
    return $scope.ca;
};

注意：您可能需要提出更好的名称。

Answer 2

即使用户未使用选择列表更改值，您也可以使用$watch()来处理值的更改。例如：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var options = [{
    value: 'a',
    id: 1
  }, {
    value: 'b',
    id: 2
  }];
  $scope.debugOutput = '';
  $scope.chart = {
    categoryAxis: options[0],
    metrics: function() {
      return options;
    }
  };
  $scope.renderMainChart = function() {
    console.log('renderMainChart', arguments);
  };
  $scope.pickA = function() {
    $scope.chart.categoryAxis = options[0];
  };
  $scope.pickB = function() {
    $scope.chart.categoryAxis = options[1];
  };
  $scope.$watch('chart.categoryAxis', function(newValue, oldValue) {
    $scope.debugOutput += 'categoryAxis changed ' + angular.toJson(oldValue) + ' to ' + angular.toJson(newValue) + "\n";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker">
  <div ng-controller="MainCtrl">
    <select class="small-3 columns end statSelect" ng-model="chart.categoryAxis" ng-change="renderMainChart()" ng-options="metric as metric.value for metric in chart.metrics()"></select>
    <div>Selected category Axis:
    <span>{{ chart.categoryAxis | json }}</span></div>
    <div>
      <input type="button" ng-click="pickA()" value="pickA" />
    </div>
    <div>
      <input type="button" ng-click="pickB()" value="pickB" />
    </div>
    <div>{{ debugOutput }}</div>
  </div>
</div>

Angular：选择以编程方式更改的ng-model，但ng-change事件不会触发

2 个答案: