robert popi robert popi - 1 month ago 14
AngularJS Question

Angular filter by text depending on dropdown

I have a problem whit my filter
I want filter using my input text and dropdown , I try explain my problem and
I hope you can help me.. I want to search about my selection in my dropdown and my input text for example i want to search nota=20
thank you.



<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/
angular.min.js"></script>
<script type="text/javascript" src="appangular.js"></script>
<title>HOME</title>
</head>
<body>
<h1>Alumnos</h1>




<input type="text" ng-model="buscaralumno" >
<select name="seleccion" id="seleccion" ng-model="parametro">
<option id="Nota" value="Nota">Nota</option>
<option id="Codigo" value="Codigo">Codigo</option>
</select>
<table ng-controller="datoscontroller">
<thead>
<tr>
<th>ID</th>
<th>CODIGO</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Nota</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Alumno in lsalumnos.ALUMNOS | filter:{Nota:buscaralumno}">

<td>{{Alumno.Id}}</td>
<td>{{Alumno.Codigo}}</td>
<td>{{Alumno.Nombre}}</td>
<td>{{Alumno.Apellido}}</td>
<td>{{Alumno.Nota}}</td>
</tr>
</tbody>
</table>


</body>
</html>







var app = angular.module("myapp",[]);

app.controller("datoscontroller",function($scope,$http){


$scope.importar = function(){

$http.get('Datos.json').success(function(Datos){

$scope.lsalumnos = Datos;

}
);
}
$scope.importar();

}
);





{
"ALUMNOS":
[
{
"Id" : "101",
"Codigo" : "1292920",
"Nombre" : "Marco ",
"Apellido" : "Lopez",
"Nota" : "20"
},
{
"Id" : "102",
"Codigo" : "1293231",
"Nombre" : "Renzo",
"Apellido" : "Chumpitaz",
"Nota" : "20"
},
{
"Id" : "103",
"Codigo" : "1029193",
"Nombre" : "Cristiano",
"Apellido" : "Ronaldo",
"Nota" : "19"
},
{
"Id" : "104",
"Codigo" : "1231232",
"Nombre" : "Paolo",
"Apellido" : "Guerrero",
"Nota" : "15"
},
{
"Id" : "105",
"Codigo" : "1111232",
"Nombre" : "Roberto",
"Apellido" : "Palacios",
"Nota" : "10"
},
{
"Id" : "106",
"Codigo" : "1123255",
"Nombre" : "Adriano",
"Apellido" : "kaka",
"Nota" : "19"
},
{
"Id" : "107",
"Codigo" : "1244232",
"Nombre" : "Manuel",
"Apellido" : "miranda",
"Nota" : "20"
},
{
"Id" : "108",
"Codigo" : "10120201",
"Nombre" : "Tania ",
"Apellido" : "renlo",
"Nota" : "14"
},
{
"Id" : "109",
"Codigo" : "1123920",
"Nombre" : "Mario ",
"Apellido" : "Lorez",
"Nota" : "14"
},
{
"Id" : "110",
"Codigo" : "13939239",
"Nombre" : "Luis ",
"Apellido" : "Perez",
"Nota" : "12"
}
]


}

Answer

If I understand that you want the dropdown to select which property to filter (Nota or Codigo), you will need to use a custom filtering function.

Something like:

$scope.parametroFilter = function(input){
    return (input[$scope.parametro].indexOf($scope.buscaralumno) != -1);
};

and use like:

<tr ng-repeat="Alumno in lsalumnos.ALUMNOS | filter:parametroFilter">

Alternatively, you could use a function to return a dynamic filter object:

$scope.getParametroFilter = function(){
    var filter = {};
    filter[$scope.parametro] = $scope.buscaralumno;
    return filter;
};

and use like:

<tr ng-repeat="Alumno in lsalumnos.ALUMNOS | filter:getParametroFilter()">