angularJS 단추 및 텍스트 상자 숨기기

Question

두 개의 단추가있는 웹 응용 프로그램을 만들고 있습니다.

첫 번째 삽입 두 번째 업데이트 두 번째 버튼을 클릭하고 모달을 열고 싶습니다. 잘 작동합니다.

모달은 내가 사용자에 삽입 선택하는 경우 hide

과 모달을해야합니다 insert 또는 modal-footer에서 update button을 클릭

<div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title"><p style="color:red; text-align:center;">Don't Leave Empty Field Please Fill 'N.A' There !!</p></h4> 
      </div> 
      <div class="modal-body"> 
<select> 
<option>Insert Text Box</option> 
<option>Update Text box</option> 
</select> 
<input type="text" name="insert"> 
<input type="text" name="update"> 
    </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default">Insert</button> 
       <button type="button" class="btn btn-default">Update</button> 
      </div> 
      </div> 

     </div> 
     </div> 

(중 삽입 또는 업데이트에) 그러나 사용자의 경우 클릭 후 poped있다 드롭 다운 목록 update textbox은 숨기고 사용자가 업데이트 insert textbox을 선택하면 숨겨야합니다.

Answer 1

는이 같은 모달을 닫으려면이 개 버튼에 NG 클릭 지시어를 추가하는 방법을 추가해야합니다

<button ng-click="closeModal()" type="button" class="btn btn-default">Insert</button> 

대부분의 경우 이미 사용하고있는 모달이 가능한 방법을 가지고

. 그렇지 않으면 컨트롤러에서 닫는 부분을 처리해야합니다.

Answer 2

컨트롤러 데이터에 정보를 저장 한 다음 ngShow 지시문 (doc)을 사용하여 둘 중 하나를 표시해야합니다. 라는 이름의 컨트롤러 updateModal 부울와 Ctrl 키가있는 경우

다음은 예입니다.

<button type="button" class="btn btn-default" ng-show="!ctrl.updateModal">Insert</button> 
<button type="button" class="btn btn-default" ng-show="ctrl.updateModal">Update</button> 

그러면이 모달을 열 때이 부울 값을 업데이트해야합니다.

Answer 3

범위 변수를 사용하여 마지막으로 누른 단추를 추적하고 ngShow을 사용하여 원하는 단추 만 표시 할 수 있습니다.

그러나 모달 대화 상자를 추가로 사용자 정의 할 가능성이있는 경우 더러워 질 것입니다. 내가 너라면, 약간의 타이핑을 희생하고 두 개의 모달 대화 상자를 만들거야. 그런 다음 액션 버튼을 사용하여 관련 모달을 각각 표시합니다.