선택에 대한 AngularJS null 값
우아한 세팅 방법을 찾을 수 없었습니다.null가 값<select>Angular JS를 합니다.
HTML:
<select ng-model="obj.selected">
<option value=null>Unknown</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
{{obj}}
JS:
$scope.obj ={"selected":null};
첫은 "이렇게 하면 좋습니다 "이렇게 하면 됩니다.{"selected":null}이 다른 된 후 은 "da"가 됩니다{"selected":"null"}(따옴표와 함께) 그건 제가 예상한 바가 아닙니다.
실행 예: http://plnkr.co/edit/WuJrBBGuHGqbKq6yL4La
이 ★★★★★★★★★★★★★★★★★★★★★★★.<option value=null>올바르지 않습니다.<option value="">[문자열(String)][문자열(String)][문자열(String)][늘(Null)]따라서 첫 번째 옵션은 선택되지 않고 첫 번째 선택 후 사라지는 다른 옵션은 기본적으로 선택됩니다.
감 잡히는 게 없어요?
이것으로 충분합니다.
컨트롤러:
function MyCntrl($scope) {
$scope.obj ={"selected":null};
$scope.objects = [{id: 1, value: "Yes"}, {id: 0, value: "No"}]
}
템플릿:
<div ng-controller="MyCntrl">
<select ng-model="obj.selected"
ng-options="value.id as value.value for value in objects">
<option value="">Unknown</option>
</select>
<br/>
{{obj}}
</div>
select와 함께 ng-options를 사용해야 합니다.
명령어는 에서 사용할 수 있습니다.select ★★★★★★★★★★★★★★★★★★★:
된 「」, 「1」을 할 수 있습니다.
<option>설정된 " "로 수 있습니다.<select>이 는 이렇게 하게 됩니다.null또는 "선택되지 않음" 옵션을 선택합니다.데모에 대해서는, 다음의 예를 참조해 주세요.
<select ng-model="obj.selected" ng-options="key as label for (key, label) in ['No', 'Yes']">
<option value="">Unknown</option>
</select>
컨트롤러에서 직접 옵션목록을 정의하는 것이 좋습니다.
다음 예시와 같이 Angular docs에서 가볍게 편집한 태그를 수동으로 작성하는 대신 ng-options를 사용해 보십시오.
http://plnkr.co/edit/DVXwlFR6MfcfYPNHScO5?p=preview
여기서 동작하는 부분은 'colors' 객체를 정의하는 17행이며, ng-options 속성은 이러한 색상에 반복되어 옵션을 만듭니다.
null을 정말로 사용하려면 아래를 참조하십시오.ng-options를 사용하여 Angular가 매핑을 처리하도록 해야 합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color selector</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
</head>
<body ng-app="">
<script>
function MyCntrl($scope) {
$scope.obj ={"selected":null};
$scope.objStates = [{key:"Unknown", value:null}, {key:"Yes", value:1}, {key:"No", value:0}]
$scope.$watch('obj.selected', function(newVal){
console.log(newVal);
})
}
</script>
<div ng-controller="MyCntrl">
<select ng-model="obj.selected" ng-options="state.value as state.key for state in objStates">
</select>
<br/>
{{obj}}
</div>
</body>
</html>
같은 문제가 발생했지만 'ng-options'를 통해 해결할 수 없었습니다.솔루션은 다음과 같습니다.
module.directive('modelToNull', [function () {
return {
scope: {
check: "&modelToNull"
},
require: 'ngModel',
link: function ($scope, element, attrs, ngModelController) {
ngModelController.$parsers.push(function (value) {
return value == null || $scope.check({value: value}) ? null : value;
});
}
};
}]);
다음과 같이 사용할 수 있습니다.
<select ng-model="obj.selected" model-to-null="value == 'null'">
<option value="null">Unknown</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
번 써보세요.parseInt for ? 를 들면 둘 다요, 다다다다."1" ★★★★★★★★★★★★★★★★★」"0"는 각각의 정수값과 동일합니다. 이 " " " 를 parseInt 얻을 수 NaN.
> parseInt("") = NaN
> parseInt("0") === 0
> parseInt("1") === 1
ng-options를 사용할 수 없는 경우, 다른 수정을 제시합니다.
저는 이 문제에 대해 제시된 솔루션을 사용하여 몇 달 동안 이 문제와 싸우고 있는데, 어떻게 아무도 이 문제를 게시하지 않았는지 모르겠습니다.
<option value="null"></option>
이것은 옵션에 ng-options가 아닌 ng-repeat을 사용하는 경우 Angular 1.6 이상에서 확실하게 동작해야 합니다.
이상적이지는 않지만 레거시 코드 작업에 익숙하기 때문에 이 간단한 수정으로 번거로움을 덜 수 있습니다.
이를 수행하려면 onchange 이벤트를 사용하여 개체를 초기화된 상태로 복원하는 것 외에 선택한 항목을 null로 설정하려고 하면 개체에서 속성이 제거됩니다.
$scope.setValue=function(val){
if($scope.obj.selected=="null")
$scope.obj ={"selected":null};
}
<select ng-change="setValue()" ng-model="obj.selected">
<option value=null ng-click="obj.selected=null">Unknown</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
이는 잘못된 생각입니다. 늘이나 정의되지 않은 상태로 노는 것이 아니라 항상 모델에 값을 포함해야 합니다.
이것은 Angular2/Angular에서 훨씬 더 쉽게 사용할 수 있습니다.
<option [value]="null">Unknown</option>
이 값은 문자열이 아니라 실제 늘 값입니다.
언급URL : https://stackoverflow.com/questions/23686118/angularjs-null-value-for-select
'programing' 카테고리의 다른 글
| gson을 사용한 Java 날짜 UTC (0) | 2023.02.26 |
|---|---|
| ng-parent $parent가 네스트되었습니다.$index 및 $index (0) | 2023.02.26 |
| MUI 구성 요소의 미디어 조회 (0) | 2023.02.26 |
| Panda의 데이터 프레임에서 json으로 인덱스 없음 (0) | 2023.02.26 |
| React 클래스 구성 요소에서 super()가 사용되지 않는 이유 이해 (0) | 2023.02.26 |