Toggle switch in ng-repeat angularjs

Question

How can I have only one toggle switch to be true at a time in ng-repeat?

Is it possible with $index ?

I am displaying toggle switch for my data using ng-repeat, I want only one switch ON at a time. If I switch ON one, others should switch OFF.

<div class="contacts" ng-repeat="data in dataList">
 <md-switch ng-model="data" >
    Switch {{ data }}
  </md-switch>
</div>

Answer 1

 <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> </head> <body ng-app="myApp" ng-cloak ng-controller="Ctrl"> <div ng-repeat="data in toggleModel"> <md-switch ng-model="data.isToggle" aria-label="Switch 2" class="md-warn" ng-change="changeToggle(data,data.isToggle)"> Switch </md-switch> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> <script type="text/javascript"> var app=angular.module('myApp', ['ngMaterial']); app.controller("Ctrl",["$scope",function($scope){ $scope.toggleModel=[ { isToggle:false },{ isToggle:false },{ isToggle:false },{ isToggle:false },{ isToggle:false },{ isToggle:true }]; $scope.changeToggle=function(data,isToggle){ angular.forEach($scope.toggleModel,function(toggle){ toggle.isToggle=false; }); data.isToggle=isToggle; } }]); </script> </body> </html>

Toggle switch in ng-repeat angularjs

Question

1 answers

solution1
-1 2017-09-22 06:36:21

Toggle switch in ng-repeat angularjs

Question

1 answers

solution1 -1 2017-09-22 06:36:21

solution1
-1 2017-09-22 06:36:21