在输入上NG-模型滤波器在输入上NG-模型滤波器(filters on ng-model in an

我有一个文本输入，我不希望让用户使用的空间，一切类型将变为小写。

我知道我不能在NG-模型如使用过滤器。

ng-model='tags | lowercase | no_spaces'

我看了看创造我自己的指令，但增加功能，以$parsers和$formatters没有更新输入，只是有其他元素ng-model就可以了。

我怎样才能改变我目前在打字输入？

我基本上是试图创建“标签”功能，其工作就像这里在计算器上的一个。

Answer 1:

我建议观看模型值和更新它在恰克： http://plnkr.co/edit/Mb0uRyIIv1eK8nTg3Qng?p=preview

唯一有趣的问题是空间：在AngularJS输入1.0.3 NG-模型自动裁剪字符串，因此它不会检测模式改变了，如果你在年底或在启动加空格（空格所以不会自动删除由我码）。 但在1.1.1有“NG-装饰”指令，允许禁用此功能（ 提交 ）。 所以我决定用1.1.1达到你在你的问题描述具体的功能。

Answer 2:

我认为，AngularJS输入和意向ngModel direcive是， 在模型无效输入不应该结束了 。 该模型应该永远是有效的。 具有无效模式的问题是，我们可能有火观察家，并采取基于无效模型（不当）的行为。

在我看来，这里的妥善解决办法是插入$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指令，如果我们想在输入的开始/结束禁止空间。

这种方法的优点是2倍：

• 无效的值不会传播到模型
• 使用指令很容易添加此自定义验证任何输入而不一遍遍重复观察

Answer 3:

解决这个问题可能是应用在控制器端的过滤器：

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

不要忘了申报$filter的依赖。

Answer 4:

如果你正在使用只读输入字段，你可以使用NG-值与过滤器。

例如：

ng-value="price | number:8"

Answer 5:

使用一个指令，它增加了两个$格式化和$解析器集合，以确保转换在两个方向上进行。

见这对方的回答更多的细节，包括一个链接到的jsfiddle。

Answer 6:

我有一个类似的问题和使用

ng-change="handler(objectInScope)" 

在我处理我所说的objectInScope的方法来正确地修改本身（粗略输入）。 在控制器我已经开始的地方，

$scope.objectInScope = myObject; 

我知道这不使用任何特殊的过滤器或观察家...但它的简单和伟大工程。 唯一的下侧，这是该objectInScope在调用处理程序中发送...

Answer 7:

如果你正在做的复杂，异步输入验证它可能是值得的，抽象的ng-model了作为它自己的验证方法的自定义类的一部分，一个级别。

https://plnkr.co/edit/gUnUjs0qHQwkq2vPZlpO?p=preview

HTML

<div>

  <label for="a">input a</label>
  <input 
    ng-class="{'is-valid': vm.store.a.isValid == true, 'is-invalid': vm.store.a.isValid == false}"
    ng-keyup="vm.store.a.validate(['isEmpty'])"
    ng-model="vm.store.a.model"
    placeholder="{{vm.store.a.isValid === false ? vm.store.a.warning : ''}}"
    id="a" />

  <label for="b">input b</label>
  <input 
    ng-class="{'is-valid': vm.store.b.isValid == true, 'is-invalid': vm.store.b.isValid == false}"
    ng-keyup="vm.store.b.validate(['isEmpty'])"
    ng-model="vm.store.b.model"
    placeholder="{{vm.store.b.isValid === false ? vm.store.b.warning : ''}}"
    id="b" />

</div>

码

(function() {

  const _ = window._;

  angular
    .module('app', [])
    .directive('componentLayout', layout)
    .controller('Layout', ['Validator', Layout])
    .factory('Validator', function() { return Validator; });

  /** Layout controller */

  function Layout(Validator) {
    this.store = {
      a: new Validator({title: 'input a'}),
      b: new Validator({title: 'input b'})
    };
  }

  /** layout directive */

  function layout() {
    return {
      restrict: 'EA',
      templateUrl: 'layout.html',
      controller: 'Layout',
      controllerAs: 'vm',
      bindToController: true
    };
  }

  /** Validator factory */  

  function Validator(config) {
    this.model = null;
    this.isValid = null;
    this.title = config.title;
  }

  Validator.prototype.isEmpty = function(checkName) {
    return new Promise((resolve, reject) => {
      if (/^\s+$/.test(this.model) || this.model.length === 0) {
        this.isValid = false;
        this.warning = `${this.title} cannot be empty`;
        reject(_.merge(this, {test: checkName}));
      }
      else {
        this.isValid = true;
        resolve(_.merge(this, {test: checkName}));
      }
    });
  };

  /**
   * @memberof Validator
   * @param {array} checks - array of strings, must match defined Validator class methods
   */

  Validator.prototype.validate = function(checks) {
    Promise
      .all(checks.map(check => this[check](check)))
      .then(res => { console.log('pass', res)  })
      .catch(e => { console.log('fail', e) })
  };

})();

Answer 8:

你可以试试这个

$scope.$watch('tags ',function(){

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

});

文章来源: filters on ng-model in an input