CODEWITHSUNDEEP
javascriptangularjsvariablesfilter
o..o
o..o

Reputation: 1921

Passing a variable to angular filter

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

Upvotes: 0

Views: 113

Answers (5)

Łukasz
Łukasz

Reputation: 2171

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/

Upvotes: 1

fyasir
fyasir

Reputation: 2970

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

Upvotes: 1

Aravind
Aravind

Reputation: 2320

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

Upvotes: 1

ManuKaracho
ManuKaracho

Reputation: 1218

because you didn't expose Test to the scope.

$scope.Test = Test;

would do the trick.

Upvotes: 1

Variant
Variant

Reputation: 17365

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.

Upvotes: 2

Related Questions