角度過濾文本取決於下拉

我有一個問題，我的過濾器我想過濾使用我的輸入文本和下拉列表，我嘗試解釋我的問題和我希望你能幫助我..我想搜索我的選擇在我的下拉列表和我的輸入文本例如我想搜索nota = 20 謝謝。角度過濾文本取決於下拉

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

 
    
 

 

 
<input type="text" ng-model="buscaralumno" > 
 
    <select name="seleccion" id="seleccion" ng-model="parametro"> 
 
     \t <option id="Nota" value="Nota">Nota</option> 
 
     \t <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(){ 
 

 
    \t $http.get('Datos.json').success(function(Datos){ 
 
     
 
     $scope.lsalumnos = Datos; 
 
     
 
    \t } 
 
    \t); 
 
    } 
 
    $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" 
    } 
]

}

來源

2016-10-19 robert popi

如果我理解你想要的下拉菜單選擇哪個屬性過濾（諾塔或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()">

來源

2016-10-19 18:42:22 plong0

非常感謝你！你太棒了 –

不客氣！很高興它幫助:) – plong0

如果要通過屬性值來過濾NG重複陣列，您需要指示你的ng模型whi你想CH屬性過濾：

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

並在下拉列表中應指明這樣的：

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

來源

2016-10-19 18:23:24

角度過濾文本取決於下拉

回答

相關問題