https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js
---------------------------------------------------------------------
Realizar cálculos a partir de valores que se introduzcan
<!DOCTYPE html>
<html ng-app="tiendadefruta">
<head>
<meta charset="utf-8">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="controlador1">
<h1>Promoción de Mangos a 2,50 € cada uno</h1>
Cantidad que quieres: <input type="text" ng-model="cantidad"><br>
Precio total: {{ cantidad * precio }}
</div>
<script>
var appLSG = angular.module('tiendadefruta', []);
appLSG.controller('controlador1', ['$scope', function($scope) {
$scope.cantidad = 0;
$scope.precio = 2.5;
}]);
</script>
</body>
</html>
Realizar cálculos usando una función
<!DOCTYPE html>
<html ng-app="appCircunferencia">
<head>
<meta charset="utf-8">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="circunferencia">
Diámetro: <input type="text" ng-model="diametro"><br>
<button ng-click="calcularCircunferencia();" >Calcular circunferencia</button>
El valor de la circunferencia es: {{ circunferencia }}
</div>
<script>
var appLSG = angular.module('appCircunferencia', []);
appLSG.controller('circunferencia', ['$scope', function($scope) {
var pi = 3.14;
$scope.calcularCircunferencia = function() {
$scope.circunferencia = $scope.diametro * pi
};
}]) ;
</script>
</body>
</html>
Directiva ng-repeat con texto simple:
<div ng-controller="leer_array">
<ul>
<li ng-repeat="valor in arrActores"> {{ valor }}</li>
</ul>
</div>
...
appLSG.controller('leer_array', ['$scope', function($scope) {
$scope.arrActores = ['James Stewart', 'Gary Cooper', 'James Cagney'];
}]);
Directiva ng-repeat con array de objetos:
<ul>
<li ng-repeat="valor in arrActores">
{{ valor.nombre }} ganó el Oscar en {{ valor.anno_oscar }}
</li>
</ul>
...
appLSG.controller('leer_array', ['$scope', function($scope) {
$scope.arrActores = [
{ 'nombre': 'James Stewart', 'anno_oscar': '1940' },
{ 'nombre': 'Gary Cooper', 'anno_oscar': '1941' },
{ 'nombre': 'James Cagney', 'anno_oscar': '1942' }
];
}]);
No hay comentarios:
Publicar un comentario