Los valores de repetición ng se pueden filtrar de acuerdo con el modelo ng en AngularJS usando el valor del campo de entrada como una expresión en un filtro. Podemos configurar la directiva ng-model en un campo de entrada para filtrar los valores ng-repeat . Los siguientes ejemplos ilustran el enfoque: Ejemplo 1: Filtrado de texto de entrada ng-repeat valores de acuerdo con ng-model. Este filtro mostrará los nombres de solo la ciudad coincidente
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Filter ng-repeat values according to ng-model</h3>
</center>
<div ng-app="app1" ng-controller="controller1">
<p>Type a city name in the input field:</p>
<p>
<input type="text" ng-model="testfilter">
</p>
<p>Filter show the names of only the matching city.</p>
<ul>
<li ng-repeat="x in citynames | filter:testfilter">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('app1', []).controller('controller1', function($scope) {
$scope.citynames = [
'Ahmedabad',
'Ajmer',
'Bhopal',
'Jaipur',
'Surat',
'Nagpur',
'Mumbai',
'Pune',
'Indore',
'Udaipur',
'Jodhpur',
'Jabalpur',
'Gwalior',
'Delhi',
'Lucknow',
'Banglore'
];
});
</script>
</body>
</html>
Salida: 
Ejemplo 2: Filtrado de texto de entrada ng-repeat valores según ng-model. Este filtro mostrará los nombres de solo el lenguaje de programación coincidente después de poner en mayúscula cada idioma aplicando el filtro.
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Filtering input text ng-repeat values according to ng-model</h3>
</center>
<div ng-app="app1" ng-controller="controller1">
<p>Type a programming language name in the input field:</p>
<p>
<input type="text" ng-model="testfilter">
</p>
<p>
Filter shows the names of only the matching programming language
after capitalizing each language by applying filter.
</p>
<ul>
<li ng-repeat="x in programminglanguagenames| filter:testfilter">
{{ x |myfilter}}
</li>
</ul>
</div>
<script>
var app = angular.module('app1', []);
app.filter('myfilter', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
c = c.toUpperCase();
txt += c;
}
return txt;
};
});
app.controller('controller1', function($scope) {
$scope.programminglanguagenames = [
'cobol',
'pascal',
'ruby',
'php',
'perl',
'python',
'c',
'c++',
'java',
'html',
'css',
'javascript',
'basic',
'lisp',
'smalltalk',
'bootstrap'
];
});
</script>
</body>
</html>
Producción: 
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA