角度过滤器不起作用 [英] Angular filter not working

问题描述

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

这是我的 HTML:

<input name='phone' ng-model='home.contact.phone' placeholder='(Area code) Phone' required ng-bind='home.contact.phone |电话'/>

这是我的过滤器:

(函数(){'使用严格'有角的.module('Allay.phoneFilter', []).filter('电话', 函数 () {返回函数(电话){if(!phone) 返回 '';var res = phone + '::'//由于这不起作用，我正在做一些非常简单的事情，在电话号码的末尾添加一个双冒号.返回资源；}});})();

我不确定您是否需要这个，但这是控制器:

(函数(){'使用严格'有角的.module('Allay', ['Allay.phoneFilter']).controller('HomeController', function () {var home = this;});})();

如果我在过滤器中的返回 res"之前添加一个警报(res)，我会看到我期望的值123::"，但是它自身的输入值仍然只是 123.

解决方案

虽然过滤器模块是一个很好的方法，但我使用 'A' 指令来做脏活，因为改变了元素值会影响它的 ng-model.

但是，如果您的实际数据操作可以用 3-4 行代码求和，我只会建议这种解决方案；否则，需要更彻底的方法.这是一个将删除任何不是整数的示例:

(函数(){'使用严格'angular.module('Allay').directive('phoneValidator', function () {返回 {限制:'A'，链接:函数(范围，元素，属性){angular.element(element).on('keyup', function() {element.val(element.val().replace(/[^0-9\.]/, ''));});}}});})();

而不是在您的 HTML 模板中:

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.

Here's my 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;
        });
})();

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.

解决方案

Although a filter module is a good approach, I use an 'A' directive to do the dirty work because changing the element value will affect its ng-model.

However, I would only suggest this kind of solution if your actual data manipulation could sum in 3-4 lines of code; otherwise, a more thorough approach is needed. This is an example that will delete anything which isn't an integer:

(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\.]/, ''));
                });
            }
        }
    });
})();

And than in your HTML template :

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

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