0
두 개의 필터가있는 테이블을 만들고 있습니다. 확인란. 첫 번째는 "360"입니다. 표에서 클릭 만하면 360, 두 번째 필터는 "2D"입니다. 표에서 클릭하면 2D로 표시됩니다. JS에서이 작업을 수행하지만, "360"을 클릭하면 테이블에 360 만 표시되지만, 이때 "2D"를 클릭하면 "360"이 선택 취소됩니다. 라디오 버튼으로 시도하지만 CSS 체크 박스가 작동하지 않습니다.두 번째 클릭 후 첫 번째 필터 선택 취소
JSON "datas"
[{"type":"2D"},{"type":"2D"},{"type":"360"},{"type":"2D"},{"type":"360"},{"type":"2D"},{"type":"360"},{"type":"2D"},{"type":"360"},{"type":"2D"}]
내 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;
};
})
그럼 "360"필터를 클릭 한 다음 "2D"필터를 클릭하면 "360"이 선택 취소됩니다. 미리 답변 해 주셔서 감사합니다.