如何使用AngularJS打开两个语义ui模式?

时间:2016-07-01 05:43:14

标签: javascript css angularjs modal-dialog semantic-ui

我有一个Angular应用程序。使用SemanticUI创建(http://semantic-ui.com/)。我使用一个模态来查看一些数据,并且在该模态中还有一个按钮来打开另一个模态。当我打开第二个模态时,它会落后于第一个模态。我想保留两种模态。我想把第二种模式放在前面。我怎样才能做到这一点 ?

这是第一个模态的代码。

<div class="ui modal" id="viewMoreModal">
    <i class="close icon"></i>

    <div class="header">
        Episodes of {{series.description}}
    </div>
    <div class="content">

        <div class="ui grid">
            <div class="floated right pointing west">
                <button ng-click="openAddNewEpisodeModal()" class="ui purple button ">Add New Episode</button>
            </div>
            <div class="sixteen wide column">
                <table class="ui very compact celled table">
                    <tr>
                        <th>Season</th>
                        <th>Episode</th>
                        <th>Alt. Episode Nr.</th>
                        <th>Title</th>
                        <th>Part</th>
                        <th>Duration</th>
                        <th>Release Date</th>
                        <th>Series</th>
                        <th>SubSeries</th>
                        <th>Tags</th>
                    </tr>
                    <tr ng-repeat="episode in episodes" onClick="HighLightTR(this,'#c9cc99','cc3333');">
                        <td>{{episode.data.season}}</td>
                        <td>{{episode.data.episode}}</td>
                        <td>{{episode.data["episode-alt"]}}</td>
                        <td>{{episode.data.title}}</td>
                        <td>{{episode.data.part}}</td>
                        <td>{{episode.data.duration | secondsToDateTime | date:'HH:mm:ss' }}</td>
                        <td>{{episode.data.date}}</td>
                        <td>{{episode.data.series}}</td>
                        <td>{{episode.data.subseries}}</td>
                        <td>
                            <a ng-repeat="sub_tag in episode.data.tags" class="ui mini orange tag label"><span>{{sub_tag}}</span></a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="floated right pointing west">
                <button ng-click="openAddNewEpisodeModal()" class="ui purple button ">Add New Episode</button>
            </div>
        </div>
    </div>
</div>

这是我的第二个模式。当用户点击&#34;添加新剧集&#34;第一个模态中的按钮。

<div class="ui united modal" id="addNewEpisodeModal">
    <i class="close icon"></i>
    <div class="header">
        Add New Episode
    </div>
    <div class="content">



    </div>
</div>

请告诉我如何解决这个问题。 这就是我打开这些模型的方式。

$scope.openAddNewEpisodeModal = function () {
    $('#addNewEpisodeModal').modal('show');
};

0 个答案:

没有答案