Multiple toggle switch with Angular js

Step1:

Here we are going to discuss how to use the multiple toggle switch  control by using the same function.


Step2:

 Here, We are having the Html Markup.  List is nothing but an object of array's which data's are coming from Api...

<tr dir-paginate="list in Createinteractive | itemsPerPage: PageSize" total-items="TotalCount" current-page="CurrentPage" ng-if="!list.IsDeleted">


 <i class="fa fa-toggle-on active" ng-model="list.IsActive" ng-if="list.IsActive ==  status == true" ng-click="changeStatus(list);"> </i>

      <i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="list.IsActive == status == false" ng-click="changeStatus(list);"> </i>

Step3: 

Toggle switch is binded in multpile times in the grid... so when i took this toogle in the UI bootstrap , Had an issue in Having multiple times toogle switch when i click single toggle control all the switch gets fired due to calling the function without parameters..

So  list has an set of arrays like this  {list = Object {Id: 82, Name: "16099626-8f54-4602-8c8c-9ccba7c953aa", FeedType: 1, ImageUrl: "h
IsActive = true }

Function:

  $scope.changeStatus = function(list) {  
                     
            list.IsActive = !list.IsActive;
             
      }

when you pass the parameters list it will trigger a particular object  not all the toggle switch control fires...

Reference from :

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

app.controller('firstCtrl', function($scope){
  $scope.items = [{id:1},{id:2},{id:3}];
 
  $scope.toogle = function(i)
  {
    i.booleanVal = !i.booleanVal ;
   
  };
 
});

Step4: 




Enjoy Folks