입력 양식 및 단추 클릭의 변경 사항을 살펴 보는 방법

Question

<div class="subsection"> 
    <form name="photo"> 
     <div class="item item-divider"> 
      Photo 
     </div> 
     <div class="item item-stacked-label"> 
      <span class="input-label">Store Photo</span> 
      <div class="container"> 
       <img ng-src=""> 
       <div class="action"></div> 
      </div> 
      <div class="action-bar" ng-click="takePhoto()"> 
      <i class="icon ion-ios-camera-outline"></i> 
      Take Picture 
      </div> 
     </div> 
    </form> 
</div> 
<div class="subsection"> 
    <div class="item item-divider"> 
     Address & Location 
    </div> 
    <form name="addr"> 
     <div class="row"> 
      <div class="col col-100"> 
       <label class="item item-input item-stacked-label"> 
        <span class="input-label">Address1</span> 
        <input type="text" ng-model="addr.addr1" required> 
       </label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col col-100"> 
       <label class="item item-input item-stacked-label"> 
        <span class="input-label">Address2</span> 
        <input type="text" ng-model="addr.addr2" required> 
       </label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col col-50"> 
       <label class="item item-input item-stacked-label"> 
       <span class="input-label">City/Town/Village</span> 
       <input type="text" ng-model="addr.city" required> 
       </label> 
      </div> 
      <div class="col col-50"> 
       <label class="item item-input item-stacked-label"> 
        <span class="input-label">State</span> 
        <input type="text" ng-model="addr.state" required> 
       </label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col col-50"> 
       <label class="item item-input item-stacked-label"> 
        <span class="input-label">Pincode</span> 
        <input type="number" ng-model="addr.pin" required> 
       </label> 
      </div> 
     </div> 
     <div class="item item-input item-stacked-label"> 
      <span class="input-label">Store Location</span> 
      <div class="container"></div> 
      <div class="action-bar" ng-click="setLocation()"> 
       <i class="icon ion-ios-location-outline"></i> 
       Set Location 
      </div> 
     </div> 
    </form> 
</div> 

양식의 여러 섹션에 호출기를 사용하는 다중 단계 양식이 있습니다. 각 부분에 입력 필드와 단추가 있습니다 ... 색상을 변경하고 싶습니다. 입력 된 양식 입력의 유효성에 따라 내 호출기 버튼을 클릭합니다. $ watchGroup을 사용했지만 어떤 성공도 찾지 못했습니다.

Answer 1

개체에 양식 컨트롤러를 할당하면 $ valid, $ invalid 등의 속성을 사용할 수 있습니다. https://stackoverflow.com/a/27013197/6081477

정상적으로 작동하는지 확인하십시오. pager 클래스의 버튼은 예제로 ng-class로 사용법을 보여줍니다.

<subsection> 
    <form name="forms.photo"> 
    <!-- photo form --> 
    </form> 
</subsection> 

<subsection> 
<form name="forms.addr"> 
    <!-- address form --> 
    </form> 
</subsection> 
<button class="pager" ng-class="{red: forms.photo.$dirty, blue: forms.addr.$valid}"> 
<!-- $scope.forms = {}; on controller init -->