1

Angular j를 사용하여 웹 개발을 처음 사용했습니다. 내가 클래스를 사용하여 div 안에 텍스트 상자를 보이거나 숨기려고합니다. 두 개의 라디오 버튼이 있습니다 "예""아니오"입니다. 그래서 예를 클릭하고 번호를 클릭하면 텍스트 상자가 포함 된 div를 표시하려고합니다.
이제는 ng-class 및 ng-model을 사용하고 ng를 사용하지 않으려 고합니다. -show/ng-hide.라디오 버튼이 기본적으로 div를 표시하지 않고 클릭으로 만 작동합니다.

ng-checked = "true"를 사용하여 기본적으로 라디오 버튼을 클릭하면 (예라고 말하면) div가 표시되지 않고 버튼 클릭으로 다시 표시되는 이유는 무엇입니까? ng-class에 대한 ng-checked 작업이 아닙니까? Fiddle

<label class="ui-radio checkbox-inline"> <input type="radio" name="toggle1" data-check="1" value="Yes" ng-model="request_same" /> <span> Yes </span> </label> 
<label class="ui-radio checkbox-inline"> <input type="radio" ng-Checked="true" name="toggle1" data-check="2" value="No" ng-model="request_same" /> <span> No </span> </label> 
+0

첨부 된 바이올린이 작동하지 않습니다. –

답변

1


IT는 NG 모델 값을 업데이트하지 않습니다, 그것은 단지 라디오 박스를 선택합니다 ng-check를 사용하지만하지 마십시오. ng-checked를 수행하는 대신 ng-init을 사용하고 model 값을 설정하십시오.

작업 HTML

<div ng-app> 
    <div class="radioToggle1"> 
    <div class="col-xs-12 form-group" id="request_same" ng-init="request_same='Yes'" > 
     <p>Yes or no</p> 
     <label class="ui-radio checkbox-inline"> 
      <input type="radio" name="toggle1" data-check="1" value="Yes" ng-model="request_same" /> <span> Yes </span> 
     </label> 
     <label class="ui-radio checkbox-inline"> 
      <input type="radio" name="toggle1" data-check="2" value="No" ng-model="request_same" /> <span> No </span> 
     </label> 
    </div> 
    <div data-show="1" ng-class="{ active : request_same == 'Yes' }" class="hide-div"> 
     <div class="col-xs-12 col-md-12 borderTop">    
      <h5> <strong> Vendor Details </strong> </h5> 
      <input type="text" /> 
     </div> 
    </div> 
</div> 
<div data-show="2"></div> 
</div> 

그냥 사업부를 숨길 기본적으로 hide-div 클래스에 추가. 그리고 그 후에 ng-class는 조건을 기준으로 요소를 표시할지 여부를 결정합니다. 이 당신을 도울 수

Working Fiddle.

희망. 감사.