angularJSボタンとテキストボックスを非表示

Question

私は2つのボタンがあるWebアプリケーションを作成しています。

第1回挿入用 第2回更新用 これらのボタンをクリックすると、モーダルを開いて作業しています。

モーダルが、私は（どちらか挿入または更新に）

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

をクリックした後、アップポップされしかし、ユーザーが挿入を選択した場合modal-footerでのユーザーのクリックinsertまたはupdate buttonがhide

とモーダルである必要があります場合にはドロップダウンリストupdate textboxは非表示にする必要があり、ユーザーが更新を選択した場合insert textboxは非表示にする必要があります。

Answer 1

あなたはNGクリック2つのボタンに指示をし、このように、モーダルを閉じるためにメソッドを追加を追加する必要があります。

<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を使用します。

しかし、最終的にモーダルダイアログをさらにカスタマイズする可能性がある場合は、面倒です。私があなただったら、ちょっとしたタイピングを犠牲にして2つのモーダルダイアログを作成します。それから私は、アクションボタンがそれぞれの関連するモーダルを表示するようにします。