source

ngTrueValue 및 ngFalseValue의 수치 설정

itover 2023. 3. 13. 20:24
반응형

ngTrueValue 및 ngFalseValue의 수치 설정

업데이트: 최신 Angular 버전에 대한 질문은 사용되지 않습니다. 이 게시물에 대한 tsh의 의견을 참조하십시오.


다음 값에 확인란을 바인딩했습니다.

<input type="checkbox" ng-model="checkbox" ng-true-value="1" ng-false-value="0" />

이 확인란의 값은 컨트롤러에서 1로 설정됩니다.

function Controller($scope) {
    $scope.checkbox = 1
}

그러나 처음에는 체크박스가 켜지지 않습니다.의 초기값을 변경하면$scope.checkbox로."1",그래요.(데모)

나는 모든 종류의 변형을 시도해 보았다.

ng-true-value="{{1}}"
ng-true-value="{{Number(1)}}"
ng-true-value="{{parseInt('1')}}"

아무도 안 먹혀요.어떻게 하면 인수를 숫자로 각지게 다룰 수 있을까요?

ng체크를 사용할 수 있습니다. 식이 truthy일 경우 요소에서 "체크됨" 특수 속성이 설정됩니다.

<input type="checkbox" 
    ng-model="checkbox" 
    ng-true-value="1" 
    ng-false-value="0" 
    ng-checked="checkbox == 1" />

그리고 당신은 사용할 수 있습니다.$scope.$watch그것을 숫자로 변환하다

$scope.$watch(function(){
    return $scope.checkbox;
}, function(){
    $scope.checkbox = Number($scope.checkbox);
    console.log($scope.checkbox, typeof $scope.checkbox);
},true);

데모

나는 그것에 대한 지시를 작성했고, 잘 작동하는 것 같다.

angular.module('app').directive('cdTrueValue', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(v){
        return v ? scope.$eval(attrs.cdTrueValue) : scope.$eval(attrs.cdFalseValue);
      });

      ngModel.$formatters.push(function(value) {
          return value === scope.$eval(attrs.cdTrueValue);
      });
    }
  };
}]);

사용방법:

<input type="checkbox" ng-model="checkbox" cd-true-value="1" cd-false-value="0" />

데모

HTML 속성에는 유형이 없습니다.다른 것은 포함할 수 없고 문자열도 포함할 수 없기 때문에 항상 문자열입니다.끝이야.

를 구별할 수 없습니다.1그리고."1"HTML Atribute로 설정합니다.Angular는 그것을 따라잡으려고 노력하고, 그래서 오직 문자열만 작동한다.

위의 첫 번째 접근법은 훌륭합니다.그거 괜찮네요.다이내믹 모델을 사용해야 할 경우 ng-change 디렉티브를 사용할 수도 있습니다(예: ID 또는 번호로 링크됨).모델을 매개 변수 ng-change="fooBar(model[ID]"", 컨트롤러 기능을 포착하여 Number(모델[]를 사용합니다.ID)를 다시 입력합니다.true를 1로, false를 0으로 변환하면 이 값을 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/21192440/setting-ngtruevalue-and-ngfalsevalue-to-numbers

반응형