Question

我正在做一张桌子，有两个过滤器复选框。首先是“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”应该取消选中。提前感谢您的回答！

Answer 1

实际上可以使用以下命令在HTML中定义该行为：

<input type="radio" name="filterOptions" id="checkbox-360" ... />
...
<input type="radio" name="filterOptions" id="checkbox-20" ... />

https://www.w3schools.com/tags/tag_input.asp

https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

单击秒后取消选中第一个过滤器

1 个答案: