Tutorial #10 del Curso de Angular JS, en este tutorial veremos como mejorar la aplicación que se realizo en el tutorial anterior, agregando más información a los elementos de la lista asi como ordenar los elementos por orden alfabético y realizar una busqueda general.
<!DOCTYPE html>
<html ng-app="filtrodatos">
<head>
<meta charset="utf-8">
<title>filtrando datos</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="buscarFruta">
<div ng-controller="listas">
<ul>
<li ng-repeat="fruta in frutas | filter:buscarFruta | orderBy:'+nombre'">
<h2>{{fruta.nombre}}</h2>
<p>Fruta de color {{fruta.color}} conocida por ser {{fruta.propiedades}}</p>
</li>
</ul>
</div>
<script type="text/javascript">
var miApp = angular.module('filtrodatos', []);
miApp.controller('listas',function($scope){
$scope.frutas = [
{
nombre: 'Kiwi',
color: 'Verde',
propiedades: 'rica en vitamina C'
},
{
nombre: 'Banana',
color: 'Amarilla',
propiedades: 'rica en magnesio y potasio'
},
{
nombre: 'Arándano',
color: 'azul',
propiedades: 'buen antioxidante'
}
];
});
</script>
</body>
</html>