current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

share|improve this question
    
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 Jun 3 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 Jun 3 at 11:52

3 Answers 3

up vote 0 down vote

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'" />
share|improve this answer
    
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" –  ziedTn Jun 3 at 11:58
up vote 0 down vote

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

share|improve this answer
    
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? –  ziedTn Jun 3 at 11:48
    
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 –  guru Jun 3 at 13:17
    
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 :) –  ziedTn Jun 3 at 13:36
    
$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 Jun 3 at 13:42
    
If possible post your non working code in plunker. I will check if I can help with that –  guru Jun 3 at 13:44
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.