angularjs - array - ng options angular 4
Filtro de casilla de verificación AngularJS (2)
Hay varias implementaciones posibles. Aquí hay uno:
Tenga un objeto
$scope.filter = {}para mantener el estado de cada filtro. Por ejemplo,{red: true, white: false...}.Asocie cada casilla de verificación con la propiedad correspondiente usando
ng-model. Por ejemplo:input type="checkbox" ng-model="filter[''red'']" />.Tener una función (por ejemplo,
$scope.filterByCategory(wine)) que decide si un vino debe mostrarse o no (basado en el objeto$scope.filter).Utilice esa función para filtrar los elementos según su categoría. Por ejemplo,
<div ng-repeat="wine in wines | filter:filterByCategory">
La función filterByCategory podría implementarse así:
function filterByCategory(wine) {
// Display the wine if
var displayWine =
// the wine''s category checkbox is checked (`filter[category]` is true)
$scope.filter[wine.category] || // or
// no checkbox is checked (all `filter[...]` are false)
noFilter($scope.filter);
return displayWine;
};
donde noFilter() es una función que verifica si hay algún filtro activado (y devuelve true si no hay ninguno):
function noFilter(filterObj) {
return Object.
keys(filterObj).
every(function (key) { return !filterObj[key]; });
}
Véase, también, esta breve demostración .
ACTUALIZACIÓN :
Creé una versión modificada, que admite múltiples filtros (no solo filtros por categoría).
Básicamente, detecta dinámicamente las propiedades disponibles (basadas en el primer elemento de wine ), agrega controles (grupos de casillas de verificación) para aplicar filtros según cada propiedad y presenta una función de filtro personalizada que:
- Filtra cada artículo de
wine, basado en cada propiedad. - Si una propiedad no tiene ningún filtro aplicado (es decir, no se ha marcado ninguna casilla de verificación), se ignora.
- Si una propiedad tiene casillas marcadas, se usa para filtrar artículos de
wine(ver arriba). - Existe un código para aplicar varios filtros utilizando AND (es decir, todas las propiedades deben coincidir) o OR (al menos una propiedad debe coincidir).
Vea, también, esta demo actualizada .
Me gustaría filtrar los resultados.
Hay una lista de vinos, mi deseo es que cuando no se marque ninguna casilla de verificación, se muestre la lista completa de vinos.
- cuando solo se marca 1 casilla de verificación se muestra la categoría relacionada
- cuando se marca más de una casilla de verificación, se muestran las categorías relacionadas
Soy un novato en AngularJS, lo intenté con ng-model sin éxito, aquí está el código sin ng-model asociado a la función:
<html ng-app="exampleApp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.wines = [
{ name: "Wine A", category: "red" },
{ name: "Wine B", category: "red" },
{ name: "wine C", category: "white" },
{ name: "Wine D", category: "red" },
{ name: "Wine E", category: "red" },
{ name: "wine F", category: "white" },
{ name: "wine G", category: "champagne"},
{ name: "wine H", category: "champagne" }
];
$scope.selectItems = function (item) {
return item.category == "red";
};
$scope.selectItems = function (item) {
return item.category == "white";
};
$scope.selectItems = function (item) {
return item.category == "champagne";
};
});
</script>
</head>
<body ng-controller="defaultCtrl">
<h4>red: <input type="checkbox"></h4>
<h4>white: <input type="checkbox"></h4>
<h4>champagne: <input type="checkbox"></h4>
<div ng-repeat="w in wines | filter:selectItems">
{{w.name}}
{{w.category}}
</div>
</body>
</html>
¿Cómo usar ng-model o ng-change para asociar una función a cada botón de casilla de verificación para tener un modelo de filtrado en tiempo real?
Prefiero usar el filter como $filter
app.filter(''someFilter'',checkboxFilter)
checkboxFilter() {
return function (arr,filter,key,noOne=false) {
// arr is an array of objects
// filter is checkbox filter. someting like {1:true,2:false}
// key is a property in ech object inside arr
// noOne is a behavior if none of checkbox is activated (default:false)
if (!arr.length) return null;
function noOneCheck(filter) {
return Object.keys(filter).every((key) => {
return !filter[key]
})
}
return arr.filter((i) => {
return filter[i[key]] || (noOne && noOneCheck(filter))
})
}
};
html:
ng-repeat="u in project.projectTeamInvite | checkbox:project.status:''status'' track by $index">