How to ad ngChange

[xpepermint]

Hey @luckies. Can you please write an example of what you are trying to achieve.

[uncedric]

I'm trying something like this:

angular.module('uiSwitch', [])

.directive('switch', function(){ return { restrict: 'AE' , replace: true , transclude: true , template: function(element, attrs) { var html = ''; html += '<span'; html += ' class="switch' + (attrs.class ? ' ' + attrs.class : '') + '"'; html += attrs.ngModel ? ' ng-click="' + attrs.ngModel + '=!' + attrs.ngModel + '"' : ''; html += ' ng-class="{ checked:' + attrs.ngModel + ' }"'; html += '>'; html += ''; html += '<input type="checkbox"'; html += attrs.id ? ' id="' + attrs.id + '"' : ''; html += attrs.name ? ' name="' + attrs.name + '"' : ''; html += attrs.ngChange ? ' ng-change="' + attrs.ngChange + '"' : ''; html += attrs.ngModel ? ' ng-model="' + attrs.ngModel + '"' : ''; html += ' style="display:none" />'; html += ''; return html; } } });

[uncedric]

But I ended up with a div outside with the attribute "ngClick". I've got the result I needed... but I want to know if there is a better way

[xpepermint]

Hum... not sure I understand your case. Are you trying to trigger something on uiSwitch click event? The best way for tracking form/element changes in angular in general is to use ngModel (even if you don't have a physical model). Have you checked the included example? It shows how to change the switch state using button and how to track onchange event. If you can describe your case in more details I can try to come up with something (jsfiddle example).

[uncedric]

Ohh never mind! I just got your point!! (silly me) Thanks man

[xpepermint]

np :)

[kishanj918]

i'm wondering that how can i get change event on switch!

In controller file i've following code.

 $scope.myquestion_toggle=function(){
            alert(enabled_1);
}

<switch id="enabled"  name="enabled" ng-model="enabled_1" class="green" ng-change="myquestion_toggle()">

[patrickdmccarthy]

Sorry, can you explain this a little further? I'm using ng-model, but on the change of the model I want to fire an event (which is why I'm trying to use ng-click or ng-change in the first place.)

I want something like ng-model ="el.status" ng-change = toggleStatus(el)

so that the toggleStatus function is kicked off every time there is a change in el.status.

[lindamarieb]

I don't know how anyone can get ngChange to work. The AngularJS ngChange docs say:

"It will not be evaluated: if the value returned from the $parsers transformation pipeline has not changed if the input has continued to be invalid since the model will stay null if the model is changed programmatically and not by a change to the input value"

Therefore ngchange will never be triggered for the checkbox change based on the model change.

The only solution that worked for me was to make my own directive that allows the override of the ng-click function:

.directive('myswitch', function(){
  return {
    restrict: 'AE'
  , replace: true
  , transclude: true
  , template: function(element, attrs) {
      var html = '';
      html += '<span';
      html +=   ' class="switch' + (attrs.class ? ' ' + attrs.class : '') + '"';
      html +=   attrs.ngClick ? '' : ' ng-click="' + attrs.ngModel + '=!' + attrs.ngModel + '"';
      html +=   ' ng-class="{ checked:' + attrs.ngModel + ' }"';
      html +=   '>';
      html +=   '<small></small>';
      html +=   '<input type="checkbox"';
      html +=     attrs.id ? ' id="' + attrs.id + '"' : '';
      html +=     attrs.name ? ' name="' + attrs.name + '"' : '';
      html +=     attrs.ngModel ? ' ng-model="' + attrs.ngModel + '"' : '';
      html +=     ' style="display:none" />';
      html += '</span>';
      return html;
    }
  };
});

<myswitch id="isActive" name="isActive" ng-model="entity.isActive" ng-click="checkPlans()" class="green"></myswitch>