Comment utiliser une fonction dans du code html ?

Version imprimable

Bonjour à tous.

Je débute en javascript.
Dans le code suivant j'aimerai formater event.date. pour cela j'ai créée la fonction suivante :

Code:

1
2
3
4
5
6
 <script type="text/javascript">
	function formatageDate(dateEvent) {
		var date = datevent;
		return date.substring(0,2) + "/" + date.substring(2,2) + "/" + date.substring(4,4);
	}
</script>

Comment l'utiliser dans le code suivant pour la donnée event.date ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <div id="ng-app" ng-app="myApp" ng-controller="EventsCtrlAjax">
		<div ng-repeat="event in events" class='eventBody'>
			<h2>{{event.titre}}</h2>
			<div class="eventData">A  {{event.place}} le {{event.date}} à {{event.hour}}</div>

			<div ng-app="myApp" ng-controller="EventsCtrlForm">
				<form novalidate class="simple-form">
					Pseudo: <input type="text" ng-model="info.login" /><br /> 
					<input type="checkbox" ng-model="info.driver" value="driver"/>Je conduis<br/>
					<br />
					<input type="button" ng-click="reset()" value="Reset" /> <input
						type="submit" ng-click="update(info)" value="S'inscrire" />
				</form>
			</div>

		</div>
	</div>

J'ai beau regardé sur internet je n'ai rien trouvé qui fonctionne.

Merci pour votre aide.

joyeuses fêtes.

29/12/2014, 15h38
Kaamo

Salut !

Etant donné que tu utilises Angular, nul besoin de réinventer la roue. Jette un petit coup d'oeil au filtre date ;)
Pense toujours à la doc officielle. Tu auras la réponse dans 90% des cas.

A bientôt et joyeuses fêtes également

Je débute aussi en angular JS : lol

event.date n'est pas une date mais un integer. Si j'utilise le filtre date : {{date.event | date:'dd/MM/yyyy'}} c'est la date 01/01/1970 qui s'affiche !

Du coup j'ai créé mon propre filtre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 var myApp = angular.module('myApp.eventsview', ['ngRoute','ui.bootstrap']) ;
 
myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/eventsview', {
    templateUrl: 'index.html',
    controller: 'EventsCtrlAjax'
  });
}])
 
myApp.filter('dateFormat', function() {
    return function(input) {
        return input.substring(0,2) + "/" + input.substring(2,2) + "/" + input.substring(4,4);
    }
})
 
myApp.controller('EventsCtrlAjax', ['$scope','$http' , function EventsCtrlAjax($scope, $http)
{
	$http({
		method : 'GET',
		url : 'rest/event/events/'
	}).success(function(data) {
		console.log(data);
		$scope.events = data;
	});
}]);

dans ma page HTML : {{event.date | dateFormat}} :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <div id="ng-app" ng-app="myApp" ng-controller="EventsCtrlAjax">
		<div ng-repeat="event in events" class='eventBody'>
			<div ng-app="myApp" ng-controller="EventsCtrlForm">
				<form novalidate class="simple-form">
					<h2>{{event.titre}}</h2>
					<div class="eventData">A {{event.place}} le {{event.date | dateFormat}} à
						{{event.hour}}
					</div>
					Pseudo: <input type="text" ng-model="info.login" /><br /> Je
					conduis <input type="checkbox" ng-model="info.driver"
						value="driver" /><br /> <br /> <input type="submit"
						ng-click="update(info)" value="S'inscrire" /> <input
						type="button" ng-click="reset()" value="Reset" />
				</form>
			</div>
 
		</div>
	</div>

mais ça plante j'ai le message suivant : Error: [$interpolate:interr] Can't interpolate: A {{event.place}} le {{event.date | dateFormat}} à
{{event.hour}}

est-ce que quelqu'un aurai une idée pourquoi ça plante??

30/12/2014, 15h01
Kaamo

Je pense que tu prends le problème à l'envers.
Dans ton contrôleur EventsCtrlAjax, récupère event.date sous forme de timestamp et tu pourras utiliser le filtre natif.
C'est beaucoup plus simple que de re-coder un filtre qui sera moins performant que le natif.

Ne pas réinventer la roue et DRY (Don't Repeat Yourself) ;)
30/12/2014, 17h31
lgcaro29

et je fais ça comment ??
30/12/2014, 17h42
Kaamo
Soit en amont si tu as accès au côté serveur (rest/event/events/) pour que le JSON renvoyé contienne le champ date correctement formatté (en timestamp).

Soit directement côté client quand tu récupères les données dans le success :
Code:

1 2 3 4 5 .success(function(data) { console.log(data); // modifier data.date $scope.events = data; }
Cela va dépendre de son format. Il faudra peut-être repasser par une date JavaScript pour obtenir le bon timestamp.