0
Ich mache eine Tabelle, mit zwei Filtern Kontrollkästchen. Erstens ist "360" - wenn Sie es in der Tabelle nur 360 zeigt klicken, funktioniert der gleiche Filter "2D" - wenn Sie in der Tabelle klicken, wird nur 2D angezeigt. Ich mache das in JS, aber was ich tun möchte ist, wenn Sie auf "360" klicken, in der Tabelle nur 360, aber wenn Sie zu diesem Zeitpunkt auf "2D" klicken, wird "360" deaktiviert. Ich versuche, dies per Optionsfeld zu tun, aber dann funktioniert meine CSS-Checkbox nicht.Deaktivieren Sie den ersten Filter nach dem Klick in der Sekunde
JSON "Daten":
[{"type":"2D"},{"type":"2D"},{"type":"360"},{"type":"2D"},{"type":"360"},{"type":"2D"},{"type":"360"},{"type":"2D"},{"type":"360"},{"type":"2D"}]
Meine Html:
<div class="form-group" style="display:block;width:40px;padding-left: 5px;float:left;height:70px;">
<input type="checkbox" id='checkbox-360' class='tags-checkbox sr-only' value="" ng-model="type2.type360"><label for='checkbox-360'>
<i class='glyphicon glyphicon-unchecked' style="color:darkgrey;width:2px;font-size:25px;"></i>
<i class='glyphicon glyphicon-check' style="color:cornflowerblue;width:2px;font-size:25px;"></i>
<h4><small>360</small></h4>
</label>
</div>
<div class="form-group" style="display:block;width:40px;padding-left:5px;float:left;height:70px;">
<input type="checkbox" id='checkbox-20' class='tags-checkbox sr-only' value="" ng-model="type1.type2D"><label for='checkbox-20'>
<i class='glyphicon glyphicon-unchecked' style="color:darkgrey;width:2px;font-size:25px;"></i>
<i class='glyphicon glyphicon-check' style="color:cornflowerblue;width:2px;font-size:25px;"></i>
<h4><small>2D</small></h4>
</label>
</div>
<tr ng-repeat="data in datas |TypeFilter360:type2.type360 | TypeFilter2D:type1.type2D>
<td>{{data.type}}</td>
</tr>
CSS:
input[type='checkbox'].tags-checkbox:checked + label > i:first-of-type,
input[type='checkbox'].tags-checkbox + label > i:last-of-type{
display: none;
}
input[type='checkbox'].tags-checkbox:checked + label > i:last-of-type{
display: inline-block;
}
JS
var app = angular.module('app', []);
app.service('service', function($http, $q){
this.getDatas = function() {
var datas = $http.get('datas.json', {cache: false});
return $q.all({datas});
};
});
app.controller('FirstCtrl', function($scope, service, $http) {
var promise = service.getDatas();
promise.then(function (data) {
$scope.datas = data.datas.data;
console.log($scope.datas);
})
})
.filter('TypeFilter2D', function(){
return function(data, type2D){
if (!type2D) return data;
var filtered2D = [];
angular.forEach(data, function(item){
if(type2D == false) {
filtered2D.push(item);
}
else if(type2D == true && item.type == "2D"){
filtered2D.push(item);
}
});
return filtered2D;
};
})
.filter('TypeFilter360', function(){
return function(data, type360){
if (!type360) return data;
var filtered360 = [];
angular.forEach(data, function(item){
if(type360 == false) {
filtered360.push(item);
}
else if(type360 == true && item.type == "360"){
filtered360.push(item);
}
});
return filtered360;
};
})
Nun, was ich tun möchte - wenn "360" Filter angeklickt wird, und dann klicke ich "2D" Filter "360" sollte deaktivieren. Vielen Dank für die Antworten im Voraus!