我需要创建一个过滤器来显示基于复选框的结果

Question

所以基本上我需要根据选中的按钮来过滤我的结果

This is the design of the page, those 3 on the top are the checkboxes, 1- done 2- in progress 3- soon

这是html，im使用angular ng-repeat根据我的SQL数据库数据在页面上添加卡片。

<section id="team" class="team section-bg portfolio">
        <div class="container aos-init aos-animate" data-aos="fade-up">
            
            <div class="section-title">
                <h1 id="obrometroH1">Galeria de Obras</h1>
                <p>Acompanhe as obras da Prefeitura de Cajamar</p>
            </div>
            <div style="text-align: center;">
                <input type="checkbox" class="btn-check" id="btn-check" checked autocomplete="off" />
                <label class="btn btn-primary btn-lg" for="btn-check">
                <img style="width: 30px;" src="~/Content/img/entregue-rounded.png" class="img-fluid animated icone-mapa" alt="" />
                Entregue</label>

                <input type="checkbox" class="btn-check" id="btn-check2" checked autocomplete="off" />
                <label class="btn btn-primary btn-lg" for="btn-check2">
                <img style="width: 30px;" src="~/Content/img/andamento-rounded.png" class="img-fluid animated icone-mapa" alt="" />
                Em andamento</label>

                <input type="checkbox" class="btn-check" id="btn-check3" checked autocomplete="off" />
                <label class="btn btn-primary btn-lg" for="btn-check3">
                <img style="width: 30px;" src="~/Content/img/breve-rounded.png" class="img-fluid animated icone-mapa" alt="" />
                Em breve</label>
            </div>

            <ul id="portfolio-flters" class="d-flex justify-content-center aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
                <li data-filter="*" class="filter-active">Todos</li>
                <li data-filter=".filter-6">Serviços Públicos</li>
                <li data-filter=".filter-1">Educação</li>
                <li data-filter=".filter-5">Lazer</li>
                <li data-filter=".filter-2">Saúde</li>
                <li data-filter=".filter-3">Segurança</li>
                <li data-filter=".filter-4">Desenvolvimento Urbano</li>
                <li data-filter=".filter-7">Cajamar Bem Cuidada</li>
            </ul>
            <div class="row portfolio-container">
                <div ng-repeat="x in listObras | orderBy:orderByField:reverseSort" class="col-lg-12 portfolio-item filter-{{x.IdTipoObra}}">
                    <div class="member d-flex align-items-start aos-init aos-animate" data-aos="zoom-in" data-aos-delay="100">
                        <div class="col-lg-3"><a ng-click="obra(x.Id)"><img src="~/Content/img/obras/{{x.FotoPrincipal}}" style="width: 300px; height:200px;" class="img-fluid" alt=""></a></div>
                        <div class="member-info col-lg-9">
                            <h4 ng-click="obra(x.Id)" style="color: #3b3b3b;">
                                <img ng-if="x.IdStatus == 1" style="width: 30px;" src="~/Content/img/entregue-rounded.png" class="img-fluid animated icone-mapa" alt="" />
                                <img ng-if="x.IdStatus == 2" style="width: 30px;" src="~/Content/img/andamento-rounded.png" class="img-fluid animated icone-mapa" alt="" />
                                <img ng-if="x.IdStatus == 3" style="width: 30px;" src="~/Content/img/breve-rounded.png" class="img-fluid animated icone-mapa" alt="" />
                                {{x.Nome}}
                            </h4>
                            <span>{{x.Endereco}}</span>
                            <p>{{x.Descricao}}</p>

                            <div class="social">
                                <button ng-click="obra(x.Id)" style="color: white;width: 316px;" type="button" class="btn btn-info">Ver mais</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer 1

用这个Js就行了。

$('#btn-check').click(function () {
    var checked = $(this).is(':checked');

    $.ajax({
        type: "POST",
        url: '/Home/GetAllEntregue',
        data: { checked: checked },
        success: function (result) {
            $scope.listObras = result;
            $scope.$apply();
        },
        error: function () {
            alert('Error 500');
        },
    });
});

Answer 2

在复选框上应用更改事件，

像这样，

对于Angular：

 <input type="checkbox" class="btn-check" id="btn-check" (change)="performFilter(filterBy)"checked autocomplete="off" />

检查下面的链接，找到有用的函数，找到“performFilter(filterBy?：string)"，她以优雅的方式处理。

https://github.com/DeborahK/Angular-Communication/blob/master/APM-Final%20v8/src/app/products/product-list.component.ts

对于Javascript，

<input type="checkbox" class="btn-check" id="btn-check" onchange="performFilter(filterBy)"checked autocomplete="off" />

逻辑将保持不变。