如何使用角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

回答

相关问题