ng-repeat angularjs中的拨动开关
[英]Toggle switch in ng-repeat angularjs
问题描述
如何在ng-repeat中一次只有一个拨动开关为真？
$index是否可能？
我正在使用ng-repeat显示数据开关，我一次只希望打开一个开关。 如果我打开一个，其他人也应该关闭。
<div class="contacts" ng-repeat="data in dataList">
<md-switch ng-model="data" >
Switch {{ data }}
</md-switch>
</div>
1 个解决方案
解决方案1
-1 2017-09-22 06:36:21
<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>
AngularJS ng-repeat和切换过滤器开/关？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.