过滤输入中的ng-model

Question

我有一个文本输入,我不想让用户使用空格,键入的所有内容都将变为小写.

我知道我不允许在ng-model上使用过滤器,例如.

ng-model='tags | lowercase | no_spaces'

我查看了创建自己的指令但是添加了函数$parsers并且$formatters没有更新输入,只更新了其他元素ng-model.

如何更改我正在输入的输入？

我本质上是在尝试创建"标签"功能,就像StackOverflow上的功能一样.

Answer 1

我认为AngularJS输入的意图和ngModel目标是无效输入永远不会在模型中结束.该模型应始终有效.拥有无效模型的问题在于我们可能会让观察者根据无效模型触发并采取(不适当的)操作.

正如我所看到的,这里适当的解决方案是插入$parsers管道并确保无效输入不会进入模型.我不确定你是如何尝试处理事情或者究竟什么不适合你的$parsers但是这里有一个简单的指令来解决你的问题(或至少我对问题的理解):

app.directive('customValidation', function(){
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {

       modelCtrl.$parsers.push(function (inputValue) {

         var transformedInput = inputValue.toLowerCase().replace(/ /g, ''); 

         if (transformedInput!=inputValue) {
           modelCtrl.$setViewValue(transformedInput);
           modelCtrl.$render();
         }         

         return transformedInput;         
       });
     }
   };
});

一旦声明了上述指令,就可以像这样使用它:

<input ng-model="sth" ng-trim="false" custom-validation>

正如@Valentyn Shybanov提出的解决方案一样,ng-trim如果我们想要在输入的开头/结尾处禁止空格,我们需要使用该指令.

这种方法的优点是双重的:

• 无效值不会传播到模型
• 使用指令可以很容易地将此​​自定义验证添加到任何输入,而无需一遍又一遍地重复观察者

Answer 2

我建议观看模型值并在chage上更新它:http://plnkr.co/edit/Mb0uRyIIv1eK8nTg3Qng？p = preview

唯一有趣的问题是使用空格:在AngularJS中,1.0.3 ng-model对输入自动修剪字符串,因此如果在末尾或开始时添加空格,它不会检测到模型已被更改(因此空格不会被我自动删除码).但是在1.1.1中有'ng-trim'指令允许禁用此功能(提交).所以我决定使用1.1.1来实现您在问题中描述的确切功能.

Answer 3

解决此问题的方法可能是在控制器端应用过滤器:

$scope.tags = $filter('lowercase')($scope.tags);

不要忘记声明$filter为依赖.

Answer 4

如果您使用的是只读输入字段,则可以将ng-value与过滤器一起使用.

例如:

ng-value="price | number:8"

Answer 5

使用添加到 $formatters 和 $parsers 集合的指令来确保在两个方向上执行转换。

有关更多详细信息，包括指向 jsfiddle 的链接，请参阅此其他答案。