在指令中使用angularjs $ filter()

时间:2014-06-03 11:28:16

标签: javascript angularjs

我想使用一些过滤器隐藏输入文本值的某些部分。

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/

好吧,我的输入文字应该只显示12:12而不是01/01/1970 12:12。在编辑时间之后,例如,如果用户将时间更改为12:40,我的ng-model必须像1970/01/01 12:40

3 个答案:

答案 0 :(得分:1)

首先,谢谢大家,这个解决方案是由@guru创建的,非常感谢他。

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

该解决方案利用了与angularjs管道渲染相关的$ formatter和$ parser。

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

ps:此解决方案与angularjs.2-rc.x

不兼容

答案 1 :(得分:0)

链接功能中的过滤器 - > $filter('limitTo')(ielem.val(), -5);过滤数组并返回带有过滤值的新数组。必须将其分配回范围变量才能反映更改。

如下所示。     $ scope.filteredValue = $ filter(' limitTo')(ielem.val(), - 5);

多数民众赞成。虽然通过在ngModelCtl中使用$ formatter可以很容易地进行格式化,但是将输入数据更改回模型可能会非常棘手。 您可以使用ngModelCtl.$parsersngModelCtl.$formatters来设置格式和查看值。

这是一个有效的解决方案:http://plnkr.co/edit/1KqLsIwGJjwUIbs0fwmQ?p=preview

答案 2 :(得分:0)

如果您不希望更改模型,请不要使用双向绑定:

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

更好的是,为什么不从日期成为真正的约会对象:

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

并使用日期过滤器:

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