반응형
AngularJS의 라디오 버튼 기본값을 설정하려면 어떻게 해야 합니까?
선택한 티켓 수에 따라 총 가격을 변경하는 시스템을 만들어야 합니다.티켓 번호를 선택하기 위해 라디오 버튼을 몇 개 만들었습니다.문제는 디폴트값이 설정되지 않아 로드 시 결과가 null이라는 것입니다.
<input type="radio" ng-model="people" value="1" checked="checked"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
<li>{{10*people}}€</li>
<li>{{8*people}}€</li>
<li>{{30*people}}€</li>
</ul>
디폴트값 설정people
ngInit로
<div ng-app>
<div ng-init="people=1" />
<input type="radio" ng-model="people" value="1"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
<li>{{10*people}}€</li>
<li>{{8*people}}€</li>
<li>{{30*people}}€</li>
</ul>
</div>
데모: 바이올린
<div ng-app="" ng-controller="myCntrl">
<input type="radio" ng-model="people" value="1"/><label>1</label>
<input type="radio" ng-model="people" value="2"/><label>2</label>
<input type="radio" ng-model="people" value="3"/><label>3</label>
</div>
<script>
function myCntrl($scope){
$scope.people=1;
}
</script>
왜 그냥 하지 않는가?ng-checked="true"
Angular 2에서는 라디오 버튼의 기본값을 다음과 같이 설정할 수 있습니다.
HTML:
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gender"
[(ngModel)]="gender" id="optionsRadios1" value="male">
Male
</label>
Component Class에서 'gender' 변수 값을 라디오 버튼 값과 동일하게 설정합니다.
gender = 'male';
<input type="radio" name="gender" value="male"<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>: "checked='checked'" %> >Male
<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>
언급URL : https://stackoverflow.com/questions/15833692/how-to-set-the-default-value-for-radio-buttons-in-angularjs
반응형
'programing' 카테고리의 다른 글
미리 설정된 파일은 개체를 내보낼 수 없습니다. (0) | 2023.04.05 |
---|---|
AJAX 요청 중 사용 안 함 버튼 (0) | 2023.04.05 |
React & Webpack을 사용한 임베디드 가능한 Javascript 플러그인 쓰기 (0) | 2023.04.05 |
클라이언트 측 AJAX JSON 날짜의 역직렬화 (0) | 2023.04.05 |
데이터 소스를 구성하지 못했습니다. 'url' 특성이 지정되지 않았으며 포함된 데이터 소스를 구성할 수 없습니다. (0) | 2023.04.05 |