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.