角过滤器不工作 [英] 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屋!