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
'source' 카테고리의 다른 글
| API를 사용하여 Wikipedia 검색 (0) | 2023.03.13 |
|---|---|
| JavaScript 개체를 JSON 문자열로 직렬화 (0) | 2023.03.13 |
| 후크를 사용할 때 상태가 업데이트되기를 기다립니다. (0) | 2023.03.13 |
| 키를 문자열로, 값을 맵 반복으로 포함하는 ngFor 루프 맵을 사용하여 반복하는 방법 (0) | 2023.03.13 |
| POST 요청보다 GET 요청을 사용하는 이점은 무엇입니까? (0) | 2023.03.08 |