如何使用角JS

我有其上有上單擊按鈕的按鈕的UI安排在兩個列布局在一個模態的元素，我顯示以下模式：如何使用角JS

<div class="modal myModal" id="myModal" role="dialog"> 
    <div class="modal-dialog modal-lg" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 align="center" class="modal-title">Title</h4> 
      </div> 

      <div class="modal-body" layout="row" layout-wrap> 
       <div id="table_data" flex="50"> 
        <table> 
         <tr> 
          <th>Col1</th> 
          <th>Col2</th> 
         </tr> 
         <tr ng-repeat="item in myList" ng-if=myList> 
          <td>{{item.name}}</td> 
          <td>{{item.type}}</td> 
         </tr> 
        </table> 
       </div> 

       <div id="tabbed_data" flex="50"> 
        <div class="panel with-nav-tabs panel-default"> 
         <div class="panel-heading"> 
          <ul class="nav nav-tabs"> 
           <li class="active"><a href="#tab1" 
              data-toggle="tab">Tab 1</a></li> 
           <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> 
           <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> 
          </ul> 
         </div> 
         <div class="panel-body"> 
          <div class="tab-content"> 
          <div class="tab-pane fade in active" id="tab1"> 
          <div class="tab-pane fade" id="tab2"> 
          <div class="tab-pane fade" id="tab3"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

這個代碼顯示的模態，但兩個divs堆疊在一起。

我想使它成爲兩列布局，這樣在模式窗口內，<div id="table_data">顯示在左邊，<div id="table_data">顯示在右邊，每列的寬度相等。

我使用下列到它在適當的列安排：https://material.angularjs.org/latest/layout

不過，該行佈局似乎並不奏效。

有人可以幫我嗎？

來源

2017-07-31 sumit

您顯示模型與mdDialog或其他模式？ –

用於顯示模式，我有一個按鈕單擊功能：$ scope.showModal（）並在其中，我只是使用$（'＃myModal'）。modal（'show'）; – sumit

好的，你根本沒有使用角材料。我真的不知道你是否可以將其flexbox實施與其他事情混合。如果你想使用Angular Material，那麼我建議你看看mdDialog服務，它可以很容易地做你想做的事情。嘗試避免將jQuery樣式編碼混合到角度應用程序中是最佳做法。 –

所以我得到這個工作，我想我會發布萬一有人被卡在類似情況下的答案：

這是我做的：

<div class="modal myModal" id="myModal" role="dialog"> 
    <div class="modal-dialog modal-lg" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 align="center" class="modal-title">Title</h4> 
      </div> 

      <div class="modal-body"> 
       <div class="row"> 
        <div id="table_data" class="col-md-6"> 
         <table> 
          <tr> 
           <th>Col1</th> 
           <th>Col2</th> 
          </tr> 
          <tr ng-repeat="item in myList" ng-if=myList> 
           <td>{{item.name}}</td> 
           <td>{{item.type}}</td> 
          </tr> 
         </table> 
        </div> 

        <div id="tabbed_data" class="col-md-6"> 
         <div class="panel with-nav-tabs panel-default"> 
          <div class="panel-heading"> 
           <ul class="nav nav-tabs"> 
            <li class="active"><a href="#tab1" 
              data-toggle="tab">Tab 1</a></li> 
            <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> 
            <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> 
           </ul> 
          </div> 
          <div class="panel-body"> 
           <div class="tab-content"> 
           <div class="tab-pane fade in active" id="tab1"> 
           <div class="tab-pane fade" id="tab2"> 
           <div class="tab-pane fade" id="tab3"> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2017-08-02 22:37:13 sumit

如何使用角JS

回答

相關問題