根据下拉列表按文字进行角度过滤

时间:2016-10-19 18:11:45

标签: angularjs

我的过滤器有问题 我希望过滤器使用我的输入文本和下拉列表,我尝试解释我的问题和 我希望你能帮助我..我想在我的下拉列表和我的输入文本中搜索我的选择,例如我想搜索nota = 20 谢谢。



<!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>
&#13;
&#13;
&#13;

&#13;
&#13;
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();

}
);
&#13;
&#13;
&#13;

{
"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"
     }
 ]

}

2 个答案:

答案 0 :(得分:0)

如果要按属性值过滤ng-repeat中的数组,则需要向ng-model指明要过滤的属性:

<input type="text" ng-model="buscaralumno.Nota" >

下拉列表应该表示如下:

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

答案 1 :(得分:0)

如果我知道您希望下拉列表选择要过滤的属性(Nota或Codigo),则需要使用自定义过滤功能。

类似的东西:

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

并使用如:

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

或者,您可以使用函数返回动态过滤器对象:

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

并使用如:

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