CODEWITHSUNDEEP
javascriptangularjs
John Westhoff
John Westhoff

Reputation: 212

Angular-toggle-switch how to detect change/click?

I am a Angular newbee trying to use the Angular-toggle-switch designd by CGARVIS: http://cgarvis.github.io/angular-toggle-switch. Unfortunately there is not a lot of documentation and the "normal" Angular option like ng-click etc wont work.

I've managed tot set the initial value of the toggle button based on if a certain value is present in a JSON object:

    <div ng-repeat="agendapunt in aktieveVergadering.Agendapunten | orderBy:'VolgNr'" ng-init="search(agendapunt.AgendapuntCollegelid)">
        <ul class="list-group">
            <li class="list-group-item">

                <table class="table-condensed apunttable">
                    <tr>
                        <td class="apuntvolgnr"><span class="badge pull-left">{{agendapunt.VolgNr}}</span></td>
                        <td class="apuntomschrijving">{{agendapunt.Omschrijving}}</td>
                        <td class="apuntkeuze"><toggle-switch model="Bespreken" on-label="Ja" off-label="Nee"  /></td>
                    </tr>
                </table>
            </li>
        </ul>
    </div>

The setting of the initial true/false is done by this function:

$scope.search = function (array) {
    this.Bespreken = false;
    for (var i = 0; i < array.length; i++) {
        if (array[i].Volledigenaam == $scope.VolledigeNaam)
            this.Bespreken = true;
            return;
    }
    return;
};

For now this gives me a page with listitems , each with a togglebutton set to the right initial value. BUT:

-How can i detect change ( or click event) of each seperate button?

-Why can't i reference the "Bespreken" value in a Angular way like $scope.Bespreken?

Upvotes: 5

Views: 21463

Answers (4)

Kevin Anderson
Kevin Anderson

Reputation: 589

For anyone who may come across this, I ended up adding the on-change to the directive scope so that I could use the syntax from Sensei's answer. It only took a couple lines of code in the angular-toggle-switch.js file and it seems to be working alright. Disclaimer: I am somewhat new to angular, so maybe this isn't the ideal approach.

scope: {
    disabled: '@',
    onLabel: '@',
    offLabel: '@',
    knobLabel: '@',
    change: '&onChange'   //Allows us to bind to a function call
},
...
...
...
link: function(scope, element, attrs, ngModelCtrl) {
    ...
    ...
    ...
    scope.toggle = function toggle() {
        if (isEnabled) {
            scope.model = !scope.model;
            ngModelCtrl.$setViewValue(scope.model);
            scope.change();   //After updating the value, execute the callback
        }
    }
}

Upvotes: -2

Chinokao
Chinokao

Reputation: 164

You are using

<toggle-switch model="Bespreken"... ></toggle-switch>

and should be 

<toggle-switch ng-model="Bespreken"... ></toggle-switch>

I've solved some problems with the scope using ng-click this way:

<toggle-switch 
  ng-model="Bespreken" 
  ng-click="switch(Bespreken)" 
  on-label="Ja"
  off-label="Nee">
</toggle-switch>

Hope it helps

Upvotes: 3

Sensei
Sensei

Reputation: 75

Try adding on-change in toggle-switch like this:

<toggle-switch
  model="switchStatus"
  on-label="Hide"
  off-label="Show"
  on-change="switchFilters()">
<toggle-switch>

than in your controller:

switchFilters = function (){
 // Do whatever u want to do
}

but before all this add it in module

var app= angular.module('app', ['toggle-switch']);

Upvotes: 4

A&#239;ssa
A&#239;ssa

Reputation: 686

You can use watchCollection to automatically detect changes in model.

$scope.$watchCollection('switchStatus', function() { ... });

Upvotes: 1

Related Questions