Question

我正在编写一个过滤器，它会以我建立的联系方式格式化电话号码但是由于某种原因，输入中的值永远不会更新，我不确定我做错了什么。

这是我的HTML：

<div class='form-group'>
    <input name='phone' ng-model='home.contact.phone' placeholder='(Area code) Phone' required ng-bind='home.contact.phone | phone' />
</div>

这是我的过滤器：

(function () {
    'use strict'

    angular
        .module('Allay.phoneFilter', [])
        .filter('phone', function () {
            return function (phone) {
                if(!phone) return '';

                var res = phone + '::' // Since this isn't working, I'm doing something super simple, adding a double colon to the end of the phone number.
                return res;
            }
        });
})();

我不确定你是否需要这个，但这是控制器：

(function () {
    'use strict'

    angular
        .module('Allay', [
            'Allay.phoneFilter'
        ])
        .controller('HomeController', function () {
            var home = this;
        });
})();

如果我在过滤器中的'return res'之前添加一个警告（res），我会看到我期望'123 ::'的值，但是输入中它自己的值仍然是123.

Answer 1

您需要create directive来更改您的ngModel，如下所示：

.directive('phoneFormat', function() {
     return {
         require: 'ngModel',
         link: function(scope, elem, attrs, ctrl) {

             var setvalue = function() {
                 elem.val(ctrl.$modelValue + "::");
             };

             ctrl.$parsers.push(function(v) {
                 return v.replace(/::/, '');
             })


             ctrl.$render = function() {
                 setvalue();
             }

             elem.bind('change', function() {
                 setvalue();
             })

         }
     };
 });

在html中使用：

<input name='phone' ng-model='contact.phone' placeholder='(Area code) Phone' required phone-format />

JS小提琴：http://jsfiddle.net/57czd36L/1/

Answer 2

虽然过滤器模块是一种很好的方法，但我个人使用的是“A＆＃39;指令做脏工作。更改元素值将影响它的ng-model。

然而，如果你的实际数据操作可以用3-4行代码求和，我只建议这种解决方案;否则需要更彻底的方法。

这是一个删除任何不是整数的例子的例子：

(function () {
'use strict'
angular.module('Allay')
    .directive('phoneValidator', function () {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                 angular.element(element).on('keyup', function() {
                      element.val(element.val().replace(/[^0-9\.]/, ''));
                 });
            });
         }
     });
})();

而不是HTML模板：

<input name="phone" ng-model="home.contact.phone" placeholder="(Area code) Phone" phoneValidator required/>`

Answer 3

您在输入中使用ngBind并不完全正确。从文档中，

ngBind属性告诉Angular将指定HTML元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容

您无需替换<input>元素的文本内容，这是没有意义的。您可以使用类似

的指令扩展NgModelController的格式化程序管道

app.directive('phoneFormat', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            ngModel.$formatters.push(function (value) {
                if (value)
                    return value + '::';
            });
        }
    }
});

然后，在您的HTML中，

<input ng-model='home.contact.phone' phone-format />

如果您想保留您编写的过滤器（对于其他用法），您实际上可以在指令中重复使用它，如

app.directive('phoneFormat', [ '$filter', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            ngModel.$formatters.push($filter('phone'));
        }
    }
}]);

$filter('phone')只返回在'phone'下注册的过滤器功能。这是Plunker。

请注意，此解决方案仅在您更改$modelValue的{{1}}时格式化数据，例如

NgModelController

如果您正在寻找某些内容来更新/格式化输入的值，因为用户正在键入，这是一项更复杂的任务。我建议使用类似angular-ui/ui-mask的内容。

Answer 4

你应该删除你的“ng-bind”，因为你正在过滤它，所呈现的是ng-model中的内容。改为使用价值。

    <input name='phone' ng-model='home.contact.phone | phone' value="{{contact.phone | phone}}"  />

参见工作示例：JsFiddle

角度过滤器不起作用

4 个答案: