Passing a variable to angular filter

Question

I'm wondering, why passing a simple variable as the parameter to the filter is not working:

Javascript:

var Test = Test || {};
Test.Constants = {};
Test.Constants.DateFormat = 'dd/MM/yyyy hh:mm';

function Main($scope){
    $scope.date = new Date();
    $scope.format = 'dd/MM/yyyy hh:mm';
    $scope.format2 = Test.Constants.DateFormat;
}

HTML:

<div>
    {{date}}<br>  // "2016-06-13T10:29:49.935Z"
    {{date | date: 'dd/MM/yyyy hh:mm'}}<br>  // 13/06/2016 02:29
    {{date | date: format}}<br>  // 13/06/2016 02:29
    {{date | date: format2}}<br>  // 13/06/2016 02:29
    {{date | date: Test.Constants.DateFormat}}  // Jun 13, 2016
</div>

Why the last one is not formatted?

Thanks

Have you tried passing $scope.format2 instead?

AranS
– AranS

2016-06-13 11:06:01 +00:00
Commented Jun 13, 2016 at 11:06 — AranS
– AranS, Commented Jun 13, 2016 at 11:06

Variant · Accepted Answer · 2016-06-13 11:06:29Z

2

Test is not defined on the scope and therefore not available in the binding.

You can read a little about scope vs. global variables here: http://jacopretorius.net/2015/04/working-with-global-variables-in-angularjs.html

The key here is how Angular interprets the expressions between the curly braces. You might expect Angular to do a simple eval on the code, but that is not the case - Angular actually uses JavaScript to parse these JavaScript-like syntax within the context of the current scope.

answered Jun 13, 2016 at 11:06

Variant

17.4k4 gold badges44 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ManuKaracho · Accepted Answer · 2016-06-13 11:06:57Z

1

because you didn't expose Test to the scope.

$scope.Test = Test;

would do the trick.

answered Jun 13, 2016 at 11:06

ManuKaracho

1,2282 gold badges15 silver badges32 bronze badges

Comments

Aravind · Accepted Answer · 2016-06-13 11:07:50Z

1

If you want to access a controller variable in html , it should be in $scope. The test you were accessing is a local variable.

answered Jun 13, 2016 at 11:07

Aravind

2,3401 gold badge14 silver badges21 bronze badges

Comments

fyasir · Accepted Answer · 2016-06-13 11:14:08Z

1

Test is not defined in your scope. You have to bind Test into $scope.

answered Jun 13, 2016 at 11:14

fyasir

2,9902 gold badges26 silver badges36 bronze badges

Comments

Łukasz · Accepted Answer · 2016-06-13 11:23:01Z

1

Define Test in scope:

function Main($scope) {

    $scope.Test = $scope.Test || {};
    $scope.Test.Constants = {};
    $scope.Test.Constants.DateFormat = 'MMM d, y';

    $scope.date = new Date();
    $scope.format = 'dd/MM/yyyy hh:mm';
    $scope.format2 = $scope.Test.Constants.DateFormat;
}

See working http://jsfiddle.net/da2w2jdL/

edited Jun 13, 2016 at 11:23

answered Jun 13, 2016 at 11:17

Łukasz

2,1711 gold badge15 silver badges29 bronze badges

Collectives™ on Stack Overflow

Passing a variable to angular filter

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related