首页 \ 问答 \ 如何使用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

相关问答

更多

使用C#显示销售管道漏斗图窗口8应用程序(Display Sales Pipe funnel chart windows 8 app using C#)

您无法使用CRM SDK在其他应用程序中显示漏斗图。 为此,您必须使用另一个图表API,并使用CRM SDK从CRM获取数据。 看看这张图表api。 You can't use CRM SDK to show the funnel chart in another application. For that you have to use another chart API, and get the data from CRM, with CRM SDK. Take a look in this

在c#中剪切一个特殊字符(Cut a special char in c#)

当我们用\分割字符串时,你必须使用\\因为\用于格式化.. string[] usuario = identitiname.Split( '\\' ); When we split string by \ then you have to use \\ because \ is used for formatting.. string[] usuario = identitiname.Split( '\\' );

谷歌云翻译和Java的编码错误(Wrong encoding of google cloud translate and Java)

这不是UTF8 / UTF16的问题。 谷歌的答案是HTML编码。 https://en.wikipedia.org/wiki/Unicode_and_HTML 如果要在xml / html上下文中仅使用ASCII传输unicode字符,这很常见。 It's not a problem of UTF8 / UTF16. The answer of google is html encoded. https://en.wikipedia.org/wiki/Unicode_and_HTML This

在MS SQL中查找序列中缺少的数字(Find missing numbers in a sequence in MS SQL)

尝试这个: 如果您需要获得更多数字,只需增加WHERE Number<=100 。 DECLARE @Tab1 TABLE (ID INT) INSERT INTO @Tab1 VALUES(1) INSERT INTO @Tab1 VALUES(3) INSERT INTO @Tab1 VALUES(5) INSERT INTO @Tab1 VALUES(7) INSERT INTO @Tab1 VALUES(9) ;WITH CTE AS ( SELECT 1 AS Number

Screeps:有没有办法为容器设置属性?(Screeps: Is there a way to set properties to a container?)

只存在一个Memory对象“Memory” 例如,如果你有房间,room.memory只是一个简写 Memory.rooms[roomName] 以同样的方式,你可以像这样为容器创建自己的内存: let container = myContainer if (!Memory.objects) Memory.objects = { } // init memory if !(container.id in Memory.objects) Memory.objects[container.id]

骨干中的动态导航(Dynamic Navigation in backbone)

我认为你与父视图的想法是正确的。 我要做的是设置一个主容器并使用路由器填写相应的“页面”视图。 例如。 管理员,用户。 在这些父视图中,您将有两个以上的视图。 一个用于导航栏,一个用于内容。 在导航栏视图中,您可以分配事件和各种导航按钮。 确保正确删除视图和取消事件事件是一个很好的例子: 僵尸视图管理。 未提交事件 的index.html <div id="main-container"> </div> router.js app.Router = Backbone.Router.extend

原始#primSocketSendDone:在Socket中失败(primitive #primSocketSendDone: in Socket failed)

某处曾经有过1024个套接字限制。 vm列表可能是最好的问题 Solved it by modifying my client code to store more data less frequently (i.e. cache more in memory) and the problem went away, now i can even run 16 Pharo instances in parallel.

我添加后左侧边栏没有显示(Left sidebar not showing after I add it)

您的问题如下: 您正在registering侧边栏,这使其可在小部件区域中使用。 您正在sidebar-left.php文件中定义补充工具栏布局 但你实际上并没有告诉你的主题在任何地方拉边栏。 简要地看一下主题,他们在一些主题文件中使用get_sidebar()调用侧边栏。 所以你有两个主要选择。 一:将这些文件复制到您的子主题并添加get_sidebar('sidebar-left'); 在相同的文件中,位置可能会有所不同,但这些是以这种方式调用侧边栏的文件: 使用此方法,您还可以创建一个新的

相关文章

更多

最新问答

更多
  • 读取UITextfields的值时出错(Error in reading values of UITextfields)
  • 将javascript变量分配给java变量(Assigning javascript variable to java variable)
  • ActiveRecord_Associations_CollectionProxy的未定义方法(Undefined method for ActiveRecord_Associations_CollectionProxy)
  • 返回两个字符串作为方法签名(Return two strings as method signature)
  • 在弹簧启动应用程序中自动连接对象(Auto wiring an object in spring boot application)
  • Log4j2 - 当前日期文件追加不起作用(Log4j2 - current date file append not working)
  • 如果已经使用计时器运行,如何解决不受欢迎的webrequest调用?(How to solve undesirable webrequest call if it is already running with timer?)
  • 释放全局变量(Freeing global variable)
  • 如何在标头中添加单独的列以便在jqgrid中进行垂直滚动(How to add separate column in header for vertical scrolling in jqgrid)
  • Javascript / jQuery切换边栏[关闭](Javascript/jQuery Toggling Sidebar [closed])
  • 套接字客户端:没有得到DataInputStream.readUTF()的完整响应(Socket client: don't get the full response with DataInputStream.readUTF())
  • 一个月的数字表示,带或不带前导零(Numeric representation of a month, with or without leading zeros)
  • SAS proc freq用于变量的不同值(SAS proc freq for distinct value of a variable)
  • 将pkg.sub导入为other.sub(importing pkg.sub as other.sub)
  • PaperJs错误并不明显(PaperJs errors are not understable)
  • 访问正文中脚本之外的javascript var(accessing a javascript var outside of script in the body)
  • 使用PowerShell查询单个注册表子项?(Query a single registry subkey using PowerShell?)
  • 可以省去do-while循环中的“do”吗?(Can leaving out the “do” in a do-while loop still work?)
  • Firestore规则:数据为数字时条件检查失败(Firestore rules: condition check fails when data is number)
  • Python:为什么在迭代时会忽略序列的__len __()?(Python: Why is the __len__() of a sequence ignored when iterating?)
  • PlayN中没有发现OpenGL上下文错误(No OpenGL context found error in PlayN)
  • 如何在AWS CodeCommit存储库中创建文件夹?(How to create folder in AWS CodeCommit repository?)
  • awk:将结果发送到使用bash变量命名的文件(awk: send results to file named using bash variable)
  • 卸载视图时防止丢失状态(Prevent loss of state when unmounting view)
  • Android EditText字段在模拟器上运行正常,但不适用于设备(Android EditText field works fine on emulator, but not device)
  • AngularJS在条件有效的ng-repeat中禁用未选中的复选框(AngularJS Disable unchecked checkbox in ng-repeat with condition)
  • codeigniter加载一个没有任何html标题的视图进行打印(codeigniter load a view without any html header for printing)
  • Liferay porlet的动作网址中的例外情况(Exception in the action url of liferay porlet)
  • 条目(XAML表单)对象引用仅与UWP App一起使用(Entry (XAML Form) object reference null only with UWP App)
  • Spring项目中的额外Gradle任务(Extra Gradle tasks in Spring project)