<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../angular/angular.min.js"></script>
<style type="text/css">
</style>
<script>
angular.module("appModule", [])
.controller("appCtrl", function ($scope) {
$scope.players = [
{ name: 'Nadal, Rafael (ESP)'},
{ name: 'Djokovic, Novak (SRB)'},
{ name: 'Federer, Roger (SUI)'},
{ name: 'Wawrinka, Stan (SUI)'},
{ name: 'Ferrer, David (ESP)'},
{ name: 'Tsonga, Jo-Wilfried (FRA)'},
{ name: 'Simon, Gilles (FRA)'},
{ name: 'Mayer, Leonardo (ARG)'},
{ name: 'Murray, Andy (GBR)'},
{ name: 'Dimitrov, Grigor (BUL)'},
{ name: 'Cilic, Marin (CRO)'}
];
})
.directive("orderedList", function () {
return function (scope, element, attrs) {
var data = scope[attrs["orderedList"]];
if (angular.isArray(data)) {
var listElem = angular.element("<ol>");
element.append(listElem);
for (var i = 0; i < data.length; i++) {
listElem.append(angular.element('<li>').text(data[i].name));
}
}
}
});
</script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<h4>Creating a Simple Custom Directive - List Directive</h4>
<div ordered-list="players"></div>
</div>
</body>
</html>
Niciun comentariu:
Trimiteți un comentariu