using angularjs $filter() inside directives

Question

i want to hide some part of the input text value using some filter.

app.directive('limtToDate', ['$filter', function ($filter) {
var dateFormat = "DD/MM/YYYY HH:mm"
return {
    restrict: 'A',
    link: function (scope, ielem, attrs) {
        scope.$watch(attrs.ngModel, function (v) {
            console.log('value changed, new value is: ' + v);
            $filter('limitTo')(ielem.val(), -5);
        });
    }
}}]);

http://jsfiddle.net/PqAhk/2/

well, my input text should just show 12:12 instead of 01/01/1970 12:12. and after editing the time, for example, if user change the time to 12:40 my ng-model has to be like following 1970/01/01 12:40

I guess limitTo limits the array to a specific length. Can you elaborate what are you trying to do in this line. $filter('limitTo')(ielem.val(), -5); — guru
– guru, Commented Jun 3, 2014 at 11:41
what, i realy want is just hidding the first part of the date "1970/01/01" and show the rest of the text value. for example if i change the time to 12:40 my ng-model will be equal 1970/01/01 12:40 — ziedTn
– ziedTn, Commented Jun 3, 2014 at 11:52

ziedTn · Accepted Answer · 2014-06-03 15:02:49Z

1

First, thank you all, this solution was created by @guru and many thanks to him.

http://plnkr.co/edit/VhsleIWMq8A4rJcVQDaw?p=preview

the solution takes advantage from $formatter and $parser related to the angularjs pipeline rendering.

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

ps : this solution is not compatible with angularjs.2-rc.x

answered Jun 3, 2014 at 15:02

ziedTn

2625 silver badges17 bronze badges

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

Comments

user2847643 · Accepted Answer · 2014-06-03 11:56:15Z

0

If you don't want your model to change then don't use two way binding:

<div ng-app = "fiddle">
    <div ng-controller="MyCtrl">  
        <table class="table">
            <input type="text" ng-value="fromDate | limitTo:-5" />
        </table>
    </div>
</div>

Better yet why not make from date a real date object:

$scope.fromDate = new Date(); // current date for demonstration, set to real value

And use the date filter:

<input type="text" ng-value="fromDate | date:'HH:mm'" />

edited Jun 3, 2014 at 11:56

answered Jun 3, 2014 at 11:51

user2847643

2,93517 silver badges23 bronze badges

1 Comment

ziedTn Over a year ago

i have updating my question to be much more clear. what i really want is just using filter to hide some part of the text value. in my case it will be "1970/01/01" but my ng-model should remain "1970/01/01 12:12" and if user edit time to 12:40 this will update my ng-model to follow "1970/01/01 12:40"

guru · Accepted Answer · 2014-06-03 13:17:44Z

0

The filter in the link function -> $filter('limitTo')(ielem.val(), -5); filters the array and returns a new array with the filtered values. It has to be assigned back to the scope variable for the changes to get reflected.

Something like below. $scope.filteredValue= $filter('limitTo')(ielem.val(), -5);

Thats intersting. Though formatting can be easy by using $formatter in the ngModelCtl syncing the input data change back to the model can be tricky. You can use the ngModelCtl.$parsers and ngModelCtl.$formatters to set up the format and view value.

Here is a working Solution: http://plnkr.co/edit/1KqLsIwGJjwUIbs0fwmQ?p=preview

edited Jun 3, 2014 at 13:17

answered Jun 3, 2014 at 11:38

guru

4,0221 gold badge31 silver badges33 bronze badges

10 Comments

ziedTn Over a year ago

it works by adding the following line ielem. val ($filter ('limitTo') (ielem. val (), -5)); but this will affect my ng-model to be equal to 12.14 and what I want is just I hide the letter 190/01/01. @Jacob Goulden what I have to do sir after your post improvement, should I edit my post?

guru Over a year ago

Thats intersting. Though formatting can be easy by using $formatter in the ngModelCtl syncing the input data change back to the model can be tricky. You can use the ngModelCtl.$parsers and ngModelCtl.$formatters to set up the format and view value. Here is a working solution: plnkr.co/edit/1KqLsIwGJjwUIbs0fwmQ?p=preview

ziedTn Over a year ago

hi, it's wonderfull, but when i use it in my project, i got NAN:NAN. and the formatValue is Undefined, if you can explain to me how it work i will gratefull :)

guru Over a year ago

$formatters - has a array of functions used to format value for display purpose $parsers - has a array of functions used to populate value to the actual model linked. Further Reading: docs.angularjs.org/api/ng/type/ngModel.NgModelController

guru Over a year ago

If possible post your non working code in plunker. I will check if I can help with that

|

Collectives™ on Stack Overflow

using angularjs $filter() inside directives

3 Answers 3

Comments

1 Comment

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related