角过滤器不工作 [英] Angular filter not working

问题描述

我编码一个过滤器，将在一个接触的形式，但是我已经建立了一些原因，在输入的值永远不会被更新，我不知道我在做什么格式错误的电话号码。

I am coding a filter that will format phone numbers in a contact form I've built however for some reason the value in the input is never being updated and I'm not sure what I'm doing wrong.

下面是我的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>

这是我的过滤器：

and here's my filter:

(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;
            }
        });
})();

我不知道，如果你需要这一点，但这里的控制器：

I'm not sure if you need this, but here's the controller:

(function () {
    'use strict'

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

如果我之前在过滤器中我看到的价值回归水库我希望'123 ::'添加警报（RES），但该值在输入它的自我仍然只是123。

If I add an alert(res) before 'return res' in the filter I see the value I expect '123::', however the value in the input it's self is still just 123.

推荐答案

您 ngBind 的说法并不正确。从文档，

Your usage of ngBind on the input is not quite correct. From the documentation,

的 ngBind 属性告诉角，以取代与给定的前pression值指定的HTML元素的文本内容，并更新文本内容时，那前pression的值更改

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes

您不需要更换＆LT的文本内容;输入＆GT; 元素，就没有意义。您可以代替延长格式化管道 NgModelController 使用指令就像

You do not need to replace the text content of the <input> element, that wouldn't make sense. You can instead extend the formatter pipeline of the NgModelController using a directive like

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，

Then, in your HTML,

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

如果你想保持你写的过滤器（用于其他用途），你可以在实际指令重新使用它像

In case you wanted to keep the filter you wrote (for other usages), you can actually re-use it in the directive like

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

$过滤器（'电话'）只返回在注册过滤函数手机。这里是一个 Plunker 。

$filter('phone') simply returns the filter function registered under 'phone'. Here is a Plunker.

请注意，此解决方案仅当您更改的 NgModelController ，例如像 $ modelValue 格式的数据

Note, this solution will only format data when you change the $modelValue of the NgModelController, for example like

$scope.$apply('home.contact.phone = "123-456-7890"');

如果您正在寻找的东西更新/格式化输入的的值作为用户键入的，这是一个比较复杂的任务。我建议使用像角UI / UI面罩。

If you are looking for something to update/format the value of the input as the user is typing, this is a more complicated task. I recommend using something like angular-ui/ui-mask.

这篇关于角过滤器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！