<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Angular con dinosaurios</title>
</head>
<body>
<section ng-app="miAplicacion">
<div ng-controller="miControlador">
<input type="text" placeholder="buscar dinosaurio" ng-model="nombreDinosario" />
<table>
<tr>
<th>nombre</th>
<th>grupo</th>
<th>tamaño</th>
<th>alimentación</th>
</tr>
<tr ng-repeat="dinosaurio in dinosaurios | filter : nombre=nombreDinosario | filter: alimentacion=tipoAlimentacion | orderBy : 'longitud' : true" >
<td>{{dinosaurio.nombre}}</td>
<td>{{dinosaurio.grupo}}</td>
<td>{{dinosaurio.longitud}}</td>
<td>{{dinosaurio.alimentacion}}</td>
</tr>
</table>
<button ng-click="seleccionBichos(1)">Seleccionar herbívoros</button>
</div>
</section>
<!-- Enlazamos angular en el footer para que no se detenga la carga inicial y el usuario vea enseguida algo -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<!-- Enlazamos el módulo principal -->
<script src="app.js"></script>
<!-- Enlazamos el los controladores de ese módulo -->
<script src="controllers.js"></script>
</body>
</html>
http://www.mmfilesi.com/?p=2638
var miModulo = angular.module('miAplicacion', []);
miModulo.controller("miControlador", function($scope) {
$scope.dinosaurios = [{
nombre: 'Rapetosaurus',
grupo: 'Titanosauria',
longitud: 15,
alimentacion: 'herbívoro'
}, {
nombre: 'Alamosaurus',
grupo: 'Titanosauria',
longitud: 21,
alimentacion: 'herbívoro'
}, {
nombre: 'Tyrannosaurus rex',
grupo: 'Tyrannosauroidea',
longitud: 13,
alimentacion: 'carnívoro'
}, {
nombre: 'Stegosaurus',
grupo: 'Stegosauridae',
longitud: 5,
alimentacion: 'herbívoro'
}
];
var tipoBichoAqui = "desactivado";
$scope.seleccionBichos = function(tipoBicho) {
if ( tipoBicho == 1 && tipoBichoAqui == "desactivado" ) {
$scope.tipoAlimentacion = "herbívoro";
tipoBichoAqui = "activado";
} else {
$scope.tipoAlimentacion = "";
tipoBichoAqui = "desactivado";
}
};
});