developer tip

AngularJS에서 라디오 버튼의 기본값을 설정하는 방법은 무엇입니까?

copycodes 2020. 12. 27. 11:16
반응형

AngularJS에서 라디오 버튼의 기본값을 설정하는 방법은 무엇입니까?


선택한 티켓 수에 따라 총 가격을 변경하는 시스템을 만들어야합니다. 티켓 수를 선택하는 라디오 버튼을 만들었습니다. ploblem은 기본값이 설정되지 않고로드시 결과가 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>

내 jsfiddle을 참조하십시오.


ngInitpeople사용 하여 기본값 설정

<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>

데모 : Fiddle


<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>

컴포넌트 클래스에서 라디오 버튼의 값과 동일한 '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

반응형