首页 \ 问答 \ 如何使用Angular JS在两列布局中排列模态中的元素(How to arrange elements in a modal in two column layout using Angular JS)

如何使用Angular JS在两列布局中排列模态中的元素(How to arrange elements in a modal in two column layout using Angular 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>

此代码显示模式,但两个div彼此堆叠在一起。

我试图将它变成两列布局,在模式窗口中,左边显示<div id="table_data"> ,右边显示<div id="table_data"> ,宽度相等为每列。

我正在使用以下内容将其排列在适当的列中: https//material.angularjs.org/latest/layout

但是,行布局似乎没有工作。

有人可以帮我吗?


I have a UI on which there is a button on clicking the button, I display the following modal:

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

This code displays the modal, but the two divs are stacked one on top of the other.

I am trying to make it into a two column layout such that within the modal window, the <div id="table_data"> is displayed on the left and the <div id="table_data"> is displayed on the right with equal width for each column.

I am using the following to arrange it in proper columns: https://material.angularjs.org/latest/layout

But, the row layout doesn't seem to be working.

Can someone please help me out?


原文:https://stackoverflow.com/questions/45425119
更新时间:2019-12-11 16:08

最满意答案

所以我得到了这个工作,我想我会发布答案,以防有人陷入类似的情况:

这是我做到的:

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

So I got this to work and I thought I'd post the answer in case someone is stuck in a similar situation:

This is how I did it:

<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

相关文章

更多

最新问答

更多
  • jsPlumb draggable element javascript函数(jsPlumb draggable element javascript function)
  • MVC4:ViewModel(带有radiobuttonlist)在HttpPost之后为空(MVC4: ViewModel (with radiobuttonlist) is empty after HttpPost)
  • 如何在同一帐户上设置“Dev repo”(在prod和团队之间)(How to set up a “Dev repo” (between the prod and the team) on the same account)
  • 如何在tcl中将eth0配置为发送方udp端口(how to configure eth0 as a sender udp port in tcl)
  • 如何在datarow []中的列中找到最大值?(How to find max value in a column in a datarow[] ?)
  • 如何使用预定义文本替换来自数据库的部分结果(How do I replace part of result coming from Database with predefined text)
  • Selenium Java注入了新的Javascript函数(Selenium Java inject new Javascript function)
  • 使用.on的多个下拉菜单选择文本仅适用于第一个下拉列表(Multiple Dropdowns Menu Selection text using .on works only on first dropdown)
  • 快速将黄土曲线添加到大型数据集图中的方法(Quick way to add loess curve to large data set graph)
  • FilteringSelect in mvc(FilteringSelect in mvc)
  • 在Delphi XE2中开发Mac或iOS应用程序需要哪些硬件/软件?(What hardware/software is necessary to develop Mac or iOS apps in Delphi XE2?)
  • 在原型的构造函数中初始化属性时获取“未定义”(Getting 'undefined' when a property is initialized in the constructor of a prototype)
  • 通过越狱加载的应用程序的Documents文件夹位置(Location of Documents folder for an app loaded via jailbreak)
  • 在OpenGL中使用可编程和固定管道功能(Using both programmable and fixed pipeline functionality in OpenGL)
  • 将任何用户输入重定向到单独的底层程序(redirect any user input to a separate underlying program)
  • 编辑文本不能正常工作android(Edit texts not working properly android)
  • “user_denied”Facebook应用页面上的Facebook用户区域设置(Facebook user locale on “user_denied” facebook app page)
  • 在大图像中找到小的部分透明图像的坐标(find coordinates of small partially-transparent image within a large image)
  • 我如何在cakephp 3.1中获得完整的相对路径?(How i can get full relative path of image in cakephp 3.1?)
  • 如何保存拖动标记的新本地化?(How to save new localization of dragged marker?)
  • MySQL UPDATE vs INSERT和DELETE(MySQL UPDATE vs INSERT and DELETE)
  • 在执行查询之前,在SQLAlchemy模型中将datetime转换为unix时间戳?(Convert datetime to unix timestamp in SQLAlchemy model before executing query?)
  • OpenCL与OpenGL互操作的优势(Advantage of OpenCL interoperability with OpenGL)
  • 如何解析用点和等分隔的数据然后添加到listview(How to parsing data from delimited with dot and equal then add to listview)
  • 带调试输出的X3解析器段错误(BOOST_SPIRIT_X3_DEBUG)(X3 parser segfaults with debug output (BOOST_SPIRIT_X3_DEBUG))
  • 将文件夹名称添加到fgrep结果(Add folder name to fgrep result)
  • 在MySQL中加载一个表是非常慢的(Loading one table in MySQL is ridiculously slow)
  • 如何将JSON放入PHP变量?(How do I put JSON into a PHP Variable?)
  • 如何绕过Microsoft.Speech.Recognition中的不流畅?(How to bypass disfluencies in Microsoft.Speech.Recognition?)
  • 原点的最后一行是什么?(What is the last row of an origin for?)