programing

ng-model 입력 유형 'number'는 angularjs가 작동하지 않습니다.

codeshow 2023. 3. 23. 23:01
반응형

ng-model 입력 유형 'number'는 angularjs가 작동하지 않습니다.

angular app에 requiresj를 통합했습니다.requirejs를 통합하기 전에

<input type="number" value="{{cart.quantity}}" ng-model="cart.quantity" />

입력란에 값을 표시하고 있었습니다.
그러나 requirejs와 통합한 후 type="number" 입력란에 값이 표시되지 않습니다.type="text" 입력 상자가 작동합니다.

type="number"로 값을 표시하는 방법은 무엇입니까?

감사해요.

나는 이 같은 문제에 부딪혀 겨우 해결했다.제 경우 RESTful을 통해 모델을 입수하고 있습니다.$resource그리고 금액의 값이 필드에 문자열로 제공되어 값이 지워집니다.이 문제를 해결하기 위해 컨트롤러에서 다음 작업을 수행하게 되었습니다.

$scope.cart = Cart.get(id: $routeParams.id, function(cart){
    cart.quantity = parseFloat(cart.quantity, 10);
});

보기를 업데이트하기 전에 값을 부동으로 변환합니다.내가 우연히 만난 한 가지는 내 첫 번째 시도가$scope.cart.quantity = parseFloat($scope.cart.quantity, 10)직후에get에의 비동기 콜시에 값이 덮어쓰기 되어 있기 때문에, 이것은 동작하지 않았습니다.get완료된.

$scope.cart = Cart.get(id: $routeParams.id);
$scope.cart.quantity = parseFloat($scope.cart.quantity, 10); // This won't work

이게 도움이 됐으면 좋겠다.

바인딩된 값은string단 한 명도 없다number.

우선, 서버가 송신하고 있는 것을 확인합니다.numberPHP 를 사용하고 있는 경우는, 다음의 것을 사용할 수 있습니다.

json_encode($array, JSON_NUMERIC_CHECK);

또, 이 때릴 수도 있습니다string안으로int또는float클라이언트 측에서 Javascript를 사용하는 경우:

var data = ['1.9', '3']; //these won't be binded to the numbers-only input
data[0] = parseFloat(data[0]); //this will
data[1] = parseInt(data[1]);

그것은 버그가 아니다.numbersinput은 유효한 숫자(유효)만 받아들입니다.


주의:

그리고 제가 묶으려고 했던 게ng-value정수 필터가 있지만 작동하지 않습니다.아마 그 이유는...ng-model둘 다 발견되었을 때 바인드되는 것입니다(예, 둘 다 같은 우선순위 수준입니다).

커스텀 디렉티브를 사용하여 이 문제를 해결합니다.

angular.module('directives').directive('input', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
      if ($el.get(0).type === 'number') {
        ngModel.$parsers.push(function(value) {
          return value.toString();
        });

        ngModel.$formatters.push(function(value) {
          return parseFloat(value, 10);
        });
      }
    }
  }
})

이렇게 하면 데이터를 restfull 리소스를 통해 가져올 때 HTTP 응답을 변경할 필요가 없습니다.

필요에 따라서, 이 디렉티브를 제한합니다.

값은 ng-model에 의해 덮어씁니다.값 속성을 삭제하면 ng-model에 카트 수량이 입력됩니다.

동일한 문제(실제로 입력 유형="범위")가 발생했으며, 사용자 지정 지시어를 사용한 해결 방법은 다음과 같습니다.

app.directive('ngFloat', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
        ngModel.$parsers.push(function(value) {
            return parseFloat(value, 10);
        });

        ngModel.$formatters.push(function(value) {
            return value.toString();
        });
    }
  };
});

명령어를 "ngFloat" 속성으로 제한했으므로 다음과 같이 입력에 태그를 붙여야 합니다.

<input ng-float type=.........

이것이 미래의 방문객들에게 도움이 되기를 바랍니다.

입력에 이름 속성을 추가했더니 작동하기 시작했습니다.

카트의 경우.수량 데이터 유형이 아닙니다.Number,작동이 안될 거에요.

니즈:

$scope.cart.quantity = parseFloat($scope.cart.quantity);

이 케이스 카트의 ng-model.quantity는 문자열이 아닌 숫자여야 합니다.

이 링크를 찾았는데 도움이 되었어요.Ruy Diaz가 보여준 것과 같은 방법으로 숫자 입력에 부가할 수 있는 문자열 투 번호 디렉티브가 생성됩니다.https://docs.angularjs.org/error/ngModel/numfmt

저도 같은 문제에 부딪혀서 새로운 사람에게 복잡한 해결책을 찾으려고 하다가 https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D의 angular 이전 버전에서 해결책을 발견했습니다.

ng-model이 어떤 문자열을 받아들이느냐에 따라 회피책으로 다음 명령어를 정의합니다.

그리고.

맥스.

입력 유형="숫자" 사용 중 값

나에게도 효과가 있었고 다른 사람에게도 효과가 있었으면 좋겠다.

이상하네, 내 경우엔 제거가min ★★★★★★★★★★★★★★★★★」max「」의 어트리뷰트input type="number" ...ng-model★★★★★★★★★★★★★★★★★★!!

arpit Kumar가 위에 올린 글과는 완전히 반대인 것 같아.

AngularJS 버전: 1.6.1

angular
  .module('xxx')
  .directive('ngFloat', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, $el, attrs, ngModel) {
        ngModel.$formatters.push(function (value) {
          return +value
        });
      }
    };
  });

언급URL : https://stackoverflow.com/questions/16829616/ng-model-for-input-type-number-not-working-angularjs

반응형