ng-repeatで同時に1つのトグルスイッチを真にする方法はありますか？ng-repeat anglejsのトグルスイッチ
$indexで可能ですか？
ng-repeatを使用して自分のデータのトグルスイッチを表示していますが、一度に1つのスイッチしかオンにしません。私が1つオンにすると、他はオフにする必要があります。
<div class="contacts" ng-repeat="data in dataList">
<md-switch ng-model="data" >
Switch {{ data }}
</md-switch>
</div>
<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>
これは、データがONの場合、スイッチがONになり、あなたのDataListコントロールに依存します。なぜあなたは$ indexを使って制御したいのですか？ –
あなたのケースにラジオボタンを使用することをお勧めします。 –