입력 내 ng-model 필터

입력 내 ng-model 필터

텍스트 입력이 있어 공백 사용을 허용하지 않고 입력된 모든 내용이 소문자로 변환됩니다.

ng-model에서는 필터를 사용할 수 없습니다.

ng-model='tags | lowercase | no_spaces'

독자적인 디렉티브를 작성했지만 기능을 추가하는 것을 검토했습니다.$parsers그리고.$formatters입력은 갱신되지 않았습니다.다른 요소만ng-model그 위에 올려놔요.

현재 입력 중인 입력을 변경하려면 어떻게 해야 합니까?

기본적으로 StackOverflow에서 동작하는 것과 같은 '태그' 기능을 작성하려고 합니다.

앵글의 의도는JS 입력과ngModeldirecive는 무효 입력이 모델에서 종료되지 않도록 하는 것입니다.모델은 항상 유효해야 합니다.무효 모델이 있는 경우의 문제는 무효 모델을 기반으로 (부적절한) 조치를 취하는 감시자가 있을 수 있다는 것입니다.

제가 보기엔, 여기서의 적절한 해결책은,$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가지입니다.

• 잘못된 값이 모델에 전파되지 않습니다.
• 디렉티브를 사용하면, 이 커스텀 검증을 임의의 입력에 간단하게 추가할 수 있습니다.워치를 몇 번이고 중복하는 일은 없습니다.

모델값을 확인하고 변경 후 갱신할 것을 제안합니다.http://plnkr.co/edit/Mb0uRyIIv1eK8nTg3Qng?p=preview

유일한 흥미로운 문제는 공간에 관한 것입니다.AngularJS 1.0.3 ng-model on input에서는 문자열이 자동으로 트리밍되므로 맨 끝 또는 맨 처음에 공백이 추가되어도 해당 모델이 변경된 것은 검출되지 않습니다(따라서 내 코드에 의해 공백이 자동으로 제거되지 않습니다).그러나 1.1.1에는 이 기능을 비활성화할 수 있는 'ng-trim' 지시문이 있습니다(commit).그래서 1.1.1을 사용하여 질문에서 설명한 정확한 기능을 구현하기로 결정했습니다.

이 문제의 해결 방법은 컨트롤러 측에 필터를 적용하는 것입니다.

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

해 주세요.$filter존관관의

읽기 전용 입력 필드를 사용하는 경우 필터와 함께 ng-value를 사용할 수 있습니다.

예를 들어 다음과 같습니다.

ng-value="price | number:8"

변환이 양방향으로 수행되도록 하려면 $formatters 컬렉션과 $parsers 컬렉션에 모두 추가하는 지시문을 사용합니다.

jsfiddle에 대한 링크 등 자세한 내용은 다음 답변을 참조하십시오.

저도 비슷한 문제가 있어서

ng-change="handler(objectInScope)" 

내 핸들러에서 나는 객체의 메서드를 호출한다.InScope가 올바르게 수정됩니다(저밀도 입력).컨트롤러에서는, 다음의 조작을 개시하고 있습니다.

$scope.objectInScope = myObject; 

화려한 필터나 감시자가 필요없다는 건 알지만...심플하고 효과가 좋습니다.이것의 유일한 단점은 오브젝트가InScope가 호출로 핸들러로 전송됩니다.

는, 추상화하는 .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) })
  };

})();

이거 드셔보세요

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

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

});

입력 텍스트를 적극적으로 변경하여 입력할 때 마지막 4자리를 제외한 모든 숫자를 *로 마스크할 수 있는 솔루션을 찾기 위해 왔습니다.이것은 $formatters에 의해 실현됩니다.

상자: ": " " " " " " " " " " :1234567890AHSB1에는 '먹다'로 표시되어야 합니다.**********AHSB

답변은 위의 @pkozlowski.opensource에서 제공한 답변의 일부에 불과합니다.

angular.module('myApp').directive('npiMask', function() {
  return {
    require: 'ngModel',
    link: function($scope, element, attrs, modelCtrl) {
      modelCtrl.$formatters.push(function(inputValue) {
        var transformedInput = inputValue.toString().replace(/.(?=.{4,}$)/g, '*');
        if (transformedInput !== inputValue) {
          modelCtrl.$setViewValue(transformedInput);
          modelCtrl.$render();
        }
        return transformedInput;
      });
    }
  };
});

<input-text 
 name="accountNum" 
 label="{{'LOAN_REPAY.ADD_LOAN.ACCOUNT_NUM_LABEL' | translate}}" 
 ng-model="vm.model.formData.loanDetails.accountNum" 
 is-required="true" 
 maxlength="35" 
 size="4" 
 npi-mask>
</input-text>

언급URL : https://stackoverflow.com/questions/14419651/filters-on-ng-model-in-an-input