如何使用复选框Ionic / Angularjs通过模态按类别过滤?

Question

我有 3 种类型的过滤器：

研究之一：

<div class="bar bar-subheader bar-assertive">
<label class="item-input-wrapper textbox-search">
<i class="icon ion-search placeholder-icon"></i>
<input ng-model="q" placeholder="Procurar" aria-label="filter restaurantess" />
</label>
</div>

其中 ng 模型过滤器为：| 过滤器： q

每个订单一个：

<!-- ORDER BY -->
<button class="button button-stable button-block  icon-left ion-android-restaurant" modal-select="" ng-model="someModel" options="selectableNames" option-property="role" modal-title="Ordenar por..." has-search="true">Ordenar
<div class="option">
<h2>{{option.name}}</h2>
</div>
</button>

其中筛选器为：| 排序依据： someModel

我需要一个类别过滤器，它会打开一个列出所有类别的模式，但只显示列出的类别(让用户不要浪费时间选择列表中不存在的类别)，其中此模式的视图是：

<ion-modal view-title="cadastrar" hide-nav-bar="false">
<ion-header-bar>
<h1 class="title">Choice the Categories</h1>
</ion-header-bar>
<ion-content>
<div class="card">
<div class="item item-text-wrap">
Estão sendo listadas apenas as categorias existentes em sua localização.
</div>
</div>
<div class="button-bar">
<button class="button button-stable button-block  icon-left ion-android-funnel" ng-click="save()">Aplicar Filtro</button>
</div>
<ion-list>
<ion-checkbox ng-repeat="item in ofertass | unique:'categoria_comida_nome' track by $index" ng-model="filtro[$index]" ng-true-value="{{item}}" ng-false-value="" ng-checked="check">{{item.categoria_comida_nome}}</ion-checkbox>
</ion-list>
<div class="button-bar">
<button class="button button-stable button-block  icon-left ion-android-funnel" ng-click="save()">Aplicar Filtro</button>
</div>

</ion-content>

如下图所示，模式代码的结果：

模态视图结果

排序和搜索运行良好。

但是我没有办法过滤用户选择的类别。

为了更好地说明，它遵循我的主要列表的完整视图(html)，我想过滤类别：

<ion-view side="center" view-title="vovócooks">

<!-- BOTÃO CARRINHO DE COMPRAS -->
<ion-nav-buttons side="right" class="has-header">
<a href="#/nhaac/carrinho" class="button button-clear button-icon icon ion-ios-cart"> {{total}} </a>
<button class="button button-icon button-clear ion-ios-color-filter-outline" id="menu-popover" ng-click="popover.show($event)"></button>
</ion-nav-buttons>
<center>
<div class="bar bar-subheader bar-assertive">
<label class="item-input-wrapper textbox-search">
<i class="icon ion-search placeholder-icon"></i>
<input ng-model="q" placeholder="Procurar" aria-label="filter restaurantess" />
</label>
</div>
</center>

<div class="tabs-striped tabs-top tabs-background-assertive tabs-color-light">
<div class="tabs" style="height:70px;">
<a class="tab-item active" href="#/nhaac/promocoes">
<i class="icon ion-home"></i> DELÍCIAS CASEIRAS
</a>
<a class="tab-item" href="#/nhaac/restaurantes">
<i class="icon ion-star"></i> VOVÓS ONLINE
</a>
</div>
</div>

<div class="tabs-striped tabs-color-assertive" >
<div class="tabs">
<a class="tab-item active" ng-click="doRefresh()">
<i class="icon ion-refresh"></i> Atualizar
</a>
<a ng-show="checarPermissoes('logado_usuario')" class="tab-item" href="#/nhaac/perfil">
<i class="icon ion-person"></i> Meu Perfil
</a>
</div>
</div>
<ion-content delegate-handle="top" lazy-scroll id="page-promocoes" class="has-header page-promocoes">
<ion-refresher pulling-text="Puxe para atualizar..." on-refresh="doRefresh()"></ion-refresher>

<div class="list animate-fade-slide-in-right">
<div class="spacer" style="width: 300px; height: 65px;"></div>
<div class="card" >
<div class="item" style="white-space:normal;font-size:12px">
<center>
<b>Sua localização atual é: </b> {{endereco_atual}}
</center>
</div>  
<center>
<button class="button button-clear button-assertive" style="font-size:12px" ui-sref="nhaac.localiza">
Mudar Localização
</button>
</center> 
</div>      
<div class="button-bar">
<!-- FILTER BY CATEGORY... -->
<button class="button button-stable button-block  icon-left ion-android-funnel" ng-click="abreModal()">
Filtrar
</button>

<!-- ORDER BY -->
<button class="button button-stable button-block  icon-left ion-android-restaurant" modal-select="" ng-model="someModel" options="selectableNames" option-property="role" modal-title="Ordenar por..." has-search="true">Ordenar
<div class="option">
<h2>{{option.name}}</h2>
</div>
</button>
</div>

<div class="card" ng-repeat="item in ofertass | filter:q | orderBy:someModel | unique: 'cadastra_oferta_cod_oferta'" ng-init="$last ? fireEvent() : null" href="#/nhaac/ofertas_singles/{{item.cadastra_oferta_cod_oferta}}">

<div class="item item-thumbnail-top item-text-wrap">
<img class="imagemCapa" image-lazy-loader="lines" ng-src="{{item.cadastra_oferta_foto}}" />
<div class="promocao"><b>{{item.cadastra_oferta_desconto}}% Off</b></div>
<div class="desconto"><b>{{item.cadastra_oferta_valor_com_desconto | currency}}</b></div>
<div class="item">
<center>
<h2 style="white-space:normal; color:#D95B43;"><b>{{item.cadastra_oferta_titulo_promocao}}</b></h2>
</center>
</div>
<div class="spacer" style="width: 300px; height: 8px;"></div>
<h3><b>Vovó Cozinheira: </b>{{item.fornecedores_fantasia}}</h3>
<div ng-model="item.avaliacao_media">
<div ng-show="item.avaliacao_media">
<!--                            <h4>Avaliação Média:  {{item.avaliacao_media}} </h4> -->

<h4>Avaliação Média
<span class="stars alignleft">
<span ng-style="{ 'width': getStars(item.avaliacao_media) }">
</span></h4>

</div>


<div class="spacer" style="width: 300px; height: 8px;"></div>
<div class="item">
<h3>Categoria: {{item.categoria_comida_nome}}</h3>
<h3><small><b>Descrição: </b>{{item.cadastra_oferta_descricao}}</small></h3>
<h3>
Preço Normal: <s style="color:red;"><small class="preco"> {{item.cadastra_oferta_valor_sem_desconto | currency}}</small></s><br> Preço Promocional: <small class="preco"> {{item.cadastra_oferta_valor_com_desconto | currency}} </small><br> Preço do Frete: <small class="preco"> {{item.fornecedor_configura_frete_custo_padrao | currency}} </small>
</h3>

</div>
</div>
</div>

<a class="item button button-clear button-assertive ink" href="#nhaac/ofertas_singles/{{item.cadastra_oferta_cod_oferta}}"><b>PEDIR</b></a>
</div>
</div>

<ion-list class="list">
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="onInfinite()" distance="5px" ng-if="hasMoreData"></ion-infinite-scroll>
</ion-list>
<ion-list class="list">
<div class="item" ng-if="results.length == 0">
<p>Nenhum resultado encontrado...</p>
</div>
</ion-list>

</ion-content>
<!-- ./content -->

在我的控制器中，我尝试通过 ng 单击摘录来过滤的是：

// PEGA OS ITENS SELECIONADOS NA MODAL E COLOCA NUM ARRAY
$scope.checkItems = {};
$scope.print = function () {
console.log($scope.checkItems);
}
// APLICANDO FILTRO CATEGORIA
$scope.userCategoria = function (checkItems) {
console.log("entra na chamada");
$scope.modal.hide();

};
$scope.save = function (checkItems) {
console.log("Chamou o save");
var array = [];
for (i in $scope.checkItems) {
console.log($scope.checkItems[i]);
if ($scope.checkItems[i] == true) {
array.push(i);
}
}
console.log(array);
$scope.MeuFiltro = array;
console.log("Selecionado final: "+ $scope.MeuFiltro);

window.localStorage.setItem("filtros", array);
$scope.modal.hide();
}

我做过的这么多测试都搞砸了......

但是你可以看到我获取数据，并将其存储在本地，用逗号分隔：

控制台结果

也就是说，我正在遭受回报(无知)的痛苦......

如果我发帖|分组依据："mais_campo">出错。

我无法按类别进行过滤，我需要帮助。

还是我需要改变逻辑？我不知道是否因为缺乏更好的逻辑(或知识)。将不胜感激...

好吧，最后，我提供了我的整个控制器：

.controller("promocoesCtrl", function ($scope, $rootScope, $state, $ionicScrollDelegate, $http, $httpParamSerializer, $stateParams, $timeout, $ionicLoading, $ionicPopup, $ionicPopover, $ionicSlideBoxDelegate, $ionicHistory, ionicMaterialInk, ionicMaterialMotion, $ionicModal, sharedCartService, sharedFilterService) {
$ionicHistory.nextViewOptions({
disableBack: false,
historyRoot: true
});

//put cart after menu
var cart = sharedCartService.cart;
$scope.endereco_atual = window.localStorage.getItem("endereco_atual");
if (window.localStorage.getItem("user_des") === undefined) {
console.log("Usuário logado, setar como logado");

} else {
console.log("Usuário deslogado, setar como deslogado");
var setar = "user_des";
window.localStorage.setItem("user_des", setar)
};

$scope.getStars = function (avalia) {
// Get the value
var val = parseFloat(avalia);
// Turn value into number/100
var size = val / 6 * 100;
return size + '%';
}
$scope.cadastra_oferta_cod_fornecedor = $stateParams.cadastra_oferta_cod_fornecedor;
$scope.endereco_atual = window.localStorage.getItem("endereco_atual");

// ORDENA POR...
$scope.selectableNames = [
{
name: "Por preço: Do Menor para o Maior",
role: "+cadastra_oferta_valor_com_desconto"
},
{
name: "Por preço: Do Maior para o Menor",
role: "-cadastra_oferta_valor_com_desconto"
},
{
name: "Por Maior Desconto (%)",
role: "-cadastra_oferta_desconto"
},
{
name: "Menor Prazo de Entrega",
role: "+fornecedor_configura_frete_prazo_entrega_min"
},
{
name: "Maior Prazo de Entrega",
role: "-fornecedor_configura_frete_prazo_entrega_min"
},
{
name: "Oferta em Ordem Alfabética",
role: "+cadastra_oferta_titulo_promocao"
},
{
name: "Por Categoria",
role: "+categoria_comida_nome"
},

//        {
//            name: "Por Menor valor de Frete",
//            role: "+fornecedor_configura_frete_custo_padrao"
//        },
];

$scope.getOpt = function (option) {
return option.name + ":" + option.role;
console.log(option);
window.localstorage.setItem("OrdenaPor", option.role);
};
// FIM DE ORDENA POR

// PEGA OS ITENS SELECIONADOS NA MODAL E COLOCA NUM ARRAY
$scope.checkItems = {};
$scope.print = function () {
console.log($scope.checkItems);
}
// APLICANDO FILTRO CATEGORIA
$scope.userCategoria = function (checkItems) {
console.log("entra na chamada");
$scope.modal.hide();

};
$scope.save = function (checkItems) {
console.log("Chamou o save");
var array = [];
for (i in $scope.checkItems) {
console.log($scope.checkItems[i]);
if ($scope.checkItems[i] == true) {
array.push(i);
}
}
console.log(array);
$scope.MeuFiltro = array;
console.log("Selecionado final: "+ $scope.MeuFiltro);

window.localStorage.setItem("filtros", array);
$scope.modal.hide();
}


// INICIA FILTRO POR CATEGORIA    
$ionicModal.fromTemplateUrl('/templates/filters/side-filter.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
});
$scope.abreModal = function () {
$scope.modal.show();
};
$scope.closeModal = function () {
$scope.modal.hide();

};
// FIM FILTRO POR CATEGORIA

$rootScope.page_id = "promocoes";
$scope.endereco_atual = window.localStorage.getItem("endereco_atual");

$scope.scrollTop = function () {
$ionicScrollDelegate.$getByHandle("top").scrollTop();
};
// open external browser 
$scope.openURL = function ($url) {
window.open($url, "_system", "location=yes");
};
// open AppBrowser
$scope.openAppBrowser = function ($url) {
window.open($url, "_blank", "closebuttoncaption=Done");
};
// open WebView
$scope.openWebView = function ($url) {
window.open($url, "_self");
};
// Set Motion
$timeout(function () {
ionicMaterialMotion.slideUp({
selector: ".slide-up"
});
}, 300);

var targetQuery = ""; //default param
var raplaceWithQuery = "";
// TODO: Dinamics Promoções
$scope.endereco_atual = window.localStorage.getItem("endereco_atual");
targetQuery = "json=promocao"; //default param
raplaceWithQuery = "json=promocao";

var fetch_per_scroll = 1;
// animation loading 
$ionicLoading.show({
template: '<div class="loader"><svg class="circular"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg></div>'
});

$scope.noMoreItemsAvailable = false; //readmore status
var lastPush = 0;
var data_ofertass = [];
if (window.localStorage.getItem("data_ofertass") !== "undefined") {
data_ofertass = JSON.parse(window.localStorage.getItem("data_ofertass"));
if (data_ofertass !== null) {
$scope.ofertass = [];
for (lastPush = 0; lastPush < 10; lastPush++) {
if (angular.isObject(data_ofertass[lastPush])) {
$scope.ofertass.push(data_ofertass[lastPush]);
};
}
$timeout(function () {
$ionicLoading.hide();
}, 500);

}
}
if (!angular.isObject(data_ofertass)) {
$timeout(function () {
// retry retrieving data
$http.get("http://vovocooks.com.br/admin/apis/api_listagem/lista_oferta_api.php?json=promocao".replace(targetQuery, raplaceWithQuery)).then(function (response) {
data_ofertass = response.data;
if (typeof (Storage) != "undefined") {
try {
window.localStorage.setItem("data_ofertass", JSON.stringify(data_ofertass));
} catch (e) {
window.localStorage.clear();
window.localStorage.setItem("data_ofertass", JSON.stringify(data_ofertass));
$state.reload();
$scope.$state = $state;
}
}
$scope.ofertass = [];
for (lastPush = 0; lastPush < 100; lastPush++) {
if (angular.isObject(data_ofertass[lastPush])) {
$scope.ofertass.push(data_ofertass[lastPush]);
};
}
}, function (response) {
// error message
var alertPopup = $ionicPopup.alert({
title: "error " + response.status,
template: response.statusText + "<br/>problem: table ofertas",
});
}).finally(function () {
$scope.$broadcast("scroll.refreshComplete");
// event done, hidden animation loading
$timeout(function () {
$ionicLoading.hide();
}, 1000);
});
}, 1000);
}


$scope.doRefresh = function () {
// retry retrieving data
//  window.localStorage.clear();
$http.get("http://vovocooks.com.br/admin/apis/api_listagem/lista_oferta_api.php?json=promocao".replace(targetQuery, raplaceWithQuery)).then(function (response) {
data_ofertass = response.data;
if (typeof (Storage) != "undefined") {
try {
window.localStorage.setItem("data_ofertass", JSON.stringify(data_ofertass));
} catch (e) {
window.localStorage.clear();
window.localStorage.setItem("data_ofertass", JSON.stringify(data_ofertass));
//   $ionicHistory.removeBackView();
$ionicHistory.clearCache();
//    $ionicHistory.clearHistory();
$state.reload();
$scope.$state = $state;

}
}
$scope.ofertass = [];
for (lastPush = 0; lastPush < 100; lastPush++) {
if (angular.isObject(data_ofertass[lastPush])) {
$scope.ofertass.push(data_ofertass[lastPush]);
};
}
}, function (response) {
// error message
var alertPopup = $ionicPopup.alert({
title: "error " + response.status,
template: response.statusText + "<br/>Problema: com a tabela de ofertas",
});
}).finally(function () {
$scope.$broadcast("scroll.refreshComplete");
// event done, hidden animation loading
$timeout(function () {
$ionicLoading.hide();
}, 500);
});

};

if (data_ofertass === null) {
data_ofertass = [];
};
//Coloca produto em destaque
$scope.addToStar = function (id, image, name, price, supply_id, deliver) {
console.log(id);
console.log(name);
console.log(price);
console.log(supply_id);


};

//add to cart function
$scope.addToCart = function (id, image, name, price, supply_id, deliver, entrega) {
// CHAMA CART.ADD DE SERVICES 
window.localStorage.setItem("fonecedor_carrinho", supply_id);
window.localStorage.setItem("tipos_pagamentos", tipopag);
window.localStorage.setItem("frete", deliver);
window.localStorage.setItem("faz_entrega", entrega);
cart.add(id, image, name, price, 1, supply_id, deliver);
$state.go('nhaac.carrinho');
};
// animation readmore
var fetchItems = function () {
for (var z = 0; z < fetch_per_scroll; z++) {
if (angular.isObject(data_ofertass[lastPush])) {
$scope.ofertass.push(data_ofertass[lastPush]);
lastPush++;
} else {;
$scope.noMoreItemsAvailable = true;
}
}
$scope.$broadcast("scroll.infiniteScrollComplete");
};

var tipo = '';
// $scope.checarPermissoes();
$scope.checarPermissoes = function (tipo) {
var permitido;
if (tipo === 'logado_usuario' && window.localStorage.getItem("user_log") !== null) {
permitido = true;
} else {
permitido = false;
}
return permitido;
};


// event readmore
$scope.onInfinite = function () {
$timeout(fetchItems, 500);
};
// create animation fade slide in right (ionic-material)
$scope.fireEvent = function () {
ionicMaterialMotion.fadeSlideInRight();
ionicMaterialInk.displayEffect();
};

// animation ink (ionic-material)
ionicMaterialInk.displayEffect();
$scope.rating = {};
$scope.rating.max = 5;
})

谢谢你的时间。对不起我的英语...

编辑：

我认为错误就在这里：

<div class="card" ng-repeat="item in ofertass | filter:q | orderBy:someModel | unique: 'cadastra_oferta_cod_oferta'" ng-init="$last ? fireEvent() : null" href="#/nhaac/ofertas_singles/{{item.cadastra_oferta_cod_oferta}}">

因为现在我可以得到一个数组，例如：["Temakes"，"Cozinha Vegana"]

但是，如何在此ng重复中添加更多此过滤器？我调用的MeuFiltro 数组：

$scope.save = function (checkItems) {
console.log("Chamou o save");
var array = [];
for (i in $scope.checkItems) {
console.log($scope.checkItems[i]);
if ($scope.checkItems[i] == true) {
array.push(i);
}
}
console.log(array);
$scope.MeuFiltro = array;
window.localStorage.setItem("filtros", array);
$scope.modal.hide();
}

Answer 1

我无法理解完整的问题。

但是你能不能尝试在类别中使用选定的变量，当用户选择类别时，它将被转换为true。

在要显示隐藏的部分，只需使用过滤器|选定