Wie kann ich nur einen Kippschalter haben, der in ng-repeat immer wahr ist?Kippschalter in ng-repeat angularjs
Ist es möglich mit $index?
Ich zeige Kippschalter für meine Daten mit ng-repeat, ich möchte nur einen Schalter auf einmal. Wenn ich eins einschalte, sollten andere ausschalten.
<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>
Es auf Ihrer Datalist hängt, wenn Daten eingeschaltet ist dann der Schalter eingeschaltet sein würde. Warum möchten Sie die Verwendung von $ index steuern? –
Ich schlage vor, Sie Radio-Tasten in Ihrem Fall zu verwenden. –