Question

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

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

Answer 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

不兼容

Answer 2

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

如下所示。 $ scope.filteredValue = $ filter（＆＃39; limitTo＆＃39;）（ielem.val（）， - 5）;

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

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

Answer 3

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

<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'" />

在指令中使用angularjs $ filter（）

3 个答案: