个人中心
gpt4 book ai didi

javascript - Angular Bootstrap 模态未显示

转载 作者：行者123 更新时间：2023-12-03 09:19:04 25 4
gpt4 key购买 nike

编辑:http://jsfiddle.net/k7tw188c/

不知道为什么它可以在 jsfiddle 上运行，但不能在我的电脑上运行!

<小时/>

我正在开发一个示例 Angular 应用程序，其中我尝试在单击事件上启动模式窗口。代码是:

HTML:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-app="testapp">
    <div class="container" ng-controller="TestController">
        <ul class="nav nav-tabs">
            <li ng-class="{active: activeTab=='inbox'}">
                <a ng-click="activeTab='inbox'">Inbox</a>
            </li>
            <li ng-class="{active: activeTab=='sent'}">
                <a ng-click="activeTab='sent'">Sent</a>
            </li>
        </ul>
        <br/>
        <table class="table table-bordered table-striped" ng-show="activeTab=='inbox'">
            <caption>No of Emails: {{getTotalEmails(emails)}}. Mailbox Size: {{getTotalSize(emails)}}</caption>
            <thead>
                <tr>
                    <th>From</th>
                    <th>Subject</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="email in emails" ng-click="showPopUp(email)">
                    <td>{{email.from}}</td>
                    <td>{{email.subject}}</td>
                    <td>{{email.date}}</td>
                </tr>
            </tbody>
        </table>

        <table class="table table-bordered table-striped" ng-show="activeTab=='sent'">
            <caption>No of Emails: {{getTotalEmails(sentEmails)}}. Mailbox Size: {{getTotalSize(sentEmails)}}</caption>
            <thead>
            <tr>
                <th>To</th>
                <th>Subject</th>
                <th>Date</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="email in sentEmails" ng-click="showPopUp(email)">
                <td>{{email.to}}</td>
                <td>{{email.subject}}</td>
                <td>{{email.date}}</td>
            </tr>
            </tbody>
        </table>
        <button class="btn btn-primary">Compose</button>

        <div class="modal" ng-show="isPopupVisible">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="closePopup()">&times;</button>
                <h3>{{selectedEmail.subject}}</h3>
            </div>
            <div class="modal-body">
                Body
            </div>
            <div class="modal-footer">
                Footer
            </div>
        </div>
    </div>
</body>

JS 是:

var app = angular.module('testapp',[]);
app.controller('TestController',function($scope){
    $scope.activeTab = 'inbox';
    $scope.isPopupVisible = false;

    $scope.emails = [
        {
            from: 'John',
            to: 'me',
            subject: 'I love angular',
            date: 'Jan 1',
            body: 'hello world!',
            size: 10
        },
        {
            from: 'Jack',
            to: 'me',
            subject: 'Angular and I are just friends',
            date: 'Feb 15',
            body: 'just kidding',
            size: 10
        },
        {
            from: 'Ember',
            to: 'me',
            subject: 'I hate you Angular!',
            date: 'Dec 8',
            body: 'wassup dude',
            size: 10
        }
    ];

    $scope.getTotalEmails = function(emailArr){
        return emailArr.length;
    };

    $scope.getTotalSize = function(emailArr){
        return emailArr.reduce(function(prev,current){
            return prev + current.size;
        },0);
    };

    $scope.sentEmails = [
        {
            from: 'John',
            to: 'me',
            subject: 'I love angular',
            date: 'Jan 1',
            body: 'hello world!',
            size: 10
        },
        {
            from: 'Jack',
            to: 'me',
            subject: 'Angular and I are just friends',
            date: 'Feb 15',
            body: 'just kidding',
            size: 10
        },
        {
            from: 'Ember',
            to: 'me',
            subject: 'I hate you Angular!',
            date: 'Dec 8',
            body: 'wassup dude',
            size: 10
        },
        {
            from: 'Ember',
            to: 'me',
            subject: 'I hate you Angular!',
            date: 'Dec 8',
            body: 'wassup dude',
            size: 10
        }
    ];

    $scope.showPopUp = function(email) {
        $scope.isPopupVisible = true;
        $scope.selectedEmail = email;
    };

    $scope.closePopup = function() {
        $scope.isPopupVisible = false;
    };
});

当我调试应用程序时，调试器进入 showPopUp 函数并正确地将 isPopUpVisible 标志更改为 true。不确定为什么模式不显示。请帮忙!

最佳答案

尝试用这个代替你的模态:

<div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="isPopupVisible">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="closePopup()">&times;</button>
         <h3>{{selectedEmail.subject}}</h3>
       </div>
       <div class="modal-body">Body</div>
       <div class="modal-footer">Footer</div>
     </div>
   </div>
 </div>

关于javascript - Angular Bootstrap 模态未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31889384/

25 4 0
文章推荐： javascript - 如何关闭 Google reCAPTCHA 本地化或锁定为英语
文章推荐： concurrency - 什么是Phusion旅客PassengerMaxRequestQueueSize的最佳值
文章推荐： jsf - 使用 JSF/Java EE 从数据库实时更新
文章推荐： javascript - 使用 AJAX 从其他远程服务器获取文件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com