CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeangular-ui-router
PythonNoobile
PythonNoobile

Reputation: 65

Angular: select ng-model programmatically changed but ng-change event doesn't fire

Here's my select element:

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

I'm changing chart.categoryAxis programmatically every time I click on a button. However, the ng-change method renderMainChart() doesn't get called. Why is this?

Here's an example of one of the options:

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

Depending on which button I click, that changes the ng-model value appropriately. But the ng-change function renderMainChart() doesn't get called.

Upvotes: 1

Views: 917

Answers (2)

Bharat Gupta
Bharat Gupta

Reputation: 2696

Aelliott1485's answer can be implemented but it would need you to add an extra watch which may not be preferable always.

If you are using Angular 1.3 or higher then you can pass a function to the ng-model directive.

This allows you to specify a method instead of a variable in your ng-model attribute. The method should take an optional parameter. If an argument is passed it should store that value, if no argument is passed it should return a value.

In this case change your ng-model to call a function instead of accessing a property.

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

and write a function like this in your controller

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

NOTE: You may need to come up with better names.

Upvotes: 2

Sᴀᴍ Onᴇᴌᴀ
Sᴀᴍ Onᴇᴌᴀ

Reputation: 8297

You can utilize $watch() to handle the changing of the value, even when the user doesn't change the value using the select list. For example:

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>

Upvotes: 0

Related Questions