Cadoles/formations
21
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Angular, première partie

Browse Source
This commit is contained in:
William Petit
2015-04-08 23:22:53 +02:00
parent de745ba6df
commit 16a28eb88b
32 changed files with 585 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
javascript/angular/exercices/conditions/.solution/app.js Normal file
View File

@ -0,0 +1,16 @@
/*
* Énoncé:
* Implémenter les conditions dans la directive "ng-class" afin d'afficher un assemblage de cellules.
*
* Le rectangle résultant doit présenter une alternance de couleur rouge & bleu sur ses colonnes, et
* avoir un côté horizontale de longueur "edge"
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.range = new Array(100);
$scope.edge = 10;
}]);

28
javascript/angular/exercices/conditions/.solution/index.html Normal file
View File

@ -0,0 +1,28 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice: conditions</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<style>
.pixel { display: inline-block; width: 50px; height: 50px; background: #ccc; float: left; text-align: center; line-height: 50px;}
.pixel.last { clear: both; }
.red { background: rgba(255, 0, 0, 0.5); }
.blue { background: rgba(0, 0, 255, 0.5); }
</style>
<div ng-controller="MainCtrl">
<div class="pixel"
ng-class="{ 'red': $odd, 'blue': $even, 'last': ($index)%edge === 0 }"
ng-repeat="i in range track by $index">
{{$index}}
</div>
</div>
<!-- Import de du framework Angular -->
<script src="../../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

16
javascript/angular/exercices/conditions/app.js vendored Normal file
View File

@ -0,0 +1,16 @@
/*
* Énoncé:
* Implémenter les conditions dans la directive "ng-class" afin d'afficher un assemblage de cellules.
*
* Le rectangle résultant doit présenter une alternance de couleur rouge & bleu sur ses colonnes, et
* avoir un côté horizontale de longueur "edge"
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.range = new Array(100);
$scope.edge = 10;
}]);

28
javascript/angular/exercices/conditions/index.html Normal file
View File

@ -0,0 +1,28 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice: conditions</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<style>
.pixel { display: inline-block; width: 50px; height: 50px; background: #ccc; float: left; text-align: center; line-height: 50px;}
.pixel.last { clear: both; }
.red { background: rgba(255, 0, 0, 0.5); }
.blue { background: rgba(0, 0, 255, 0.5); }
</style>
<div ng-controller="MainCtrl">
<div class="pixel"
ng-class=""
ng-repeat="i in range track by $index">
{{$index}}
</div>
</div>
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>