Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

  • where can i find more info/examples about using the Angular-toggle-switch?
like image 648
John Westhoff Avatar asked Mar 07 '14 08:03

John Westhoff


1 Answers

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']);
like image 200
Sensei Avatar answered Sep 27 '22 21:09

Sensei