Question

当用户从下拉列表中选择一个元素时，我想显示一个弹出窗口。但是相反，我得到的是纯文本，没有显示模式窗口。请帮忙：以下是我的代码的参考资料-

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.value = '';
    $scope.accntDetails = {
        accnt01: { bankName: "HDFC", bankbranch: "delhi", accntNumber: "12345" },
        accnt02: { bankName: "ICICI", bankbranch: "mumbai", accntNumber: "12346" },
        accnt03: { bankName: "IDBI", bankbranch: "pune", accntNumber: "12347" }
    };

    $scope.modalShown = false;
    $scope.toggleModal = function() {
        $scope.modalShown = true;
    };

    $scope.changedValue = function(bank) {
        $scope.value = bank.bankName;
        $scope.toggleModal();
        console.log($scope.value);
    }

    angular.module('myApp').directive('modalDialog', function() {
        return {
            restrict: 'E',
            scope: {
                show: '='
            },
            transclude: true,
            link: function(scope, element, attrs) {
                console.log('attrs: ', attrs);
                scope.dialogStyle = {};
                if (attrs.boxWidth) {
                    scope.dialogStyle.width = attrs.boxWidth;
                }
                if (attrs.boxHeight) {
                    scope.dialogStyle.height = attrs.boxHeight;
                }
                scope.hideModal = function() {
                    scope.modalShown = false;
                };
            },
            template: `<div class='ng-modal' ng-show='modalShown'>
          <div class='ng-modal-overlay' ng-click='hideModal()'></div>
          <div class='ng-modal-dialog' ng-style='dialogStyle'>
            <div class='ng-modal-close' ng-click='hideModal()'>X</div>
            <div class='ng-modal-dialog-content' ng-transclude></div>
          </div>
      </div>`
        };
    });

});

/* Custom CSS- this is the css code for showing up a modal */

.ng-modal-overlay {
    /* A dark translucent div that covers the whole screen */
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #808080;
    opacity: 0.8;
}

.ng-modal-dialog {
    background-color: #fff;
    box-shadow: 10px 10px #595554;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ng-modal-dialog-content {
    padding: 10px;
    text-align: left;
}

.ng-modal-close {
    position: absolute;
    top: 3px;
    right: 5px;
    padding: 5px;
    cursor: pointer;
    font-size: 120%;
    display: inline-block;
    font-weight: bold;
    font-family: 'arial', 'sans-serif';
}

<body>


    <div ng-app="myApp" ng-controller="myCtrl">

        <p>Select account number:</p>

        <!-- <select ng-model="accnt" ng-options="y.bankName for (x, y) in accntDetails">
        </select> -->
        <select ng-model="bankSelected" ng-change=" toggleModal();" 
            data-ng-options="bank as bank.bankName for bank in accntDetails">
          <option value="">Select Account</option>
        </select>
        <h1>You selected: {{bankSelected.bankName}}</h1>
        <h2>branch: {{bankSelected.bankbranch}}</h2>
        <h3>Number: {{bankSelected.accntNumber}}</h3>

        <div ng-show="modalShown">
            <modal-dialog box-width="400px" box-height="150px">

                <div class="row">
                    <div class="col-md-12">
                        <h3>Header</h3>
                        <hr style="border-top:1px solid darkblue" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        This is an important message
                    </div>
                </div>
            </modal-dialog>
        </div>

    </div>




</body>

当用户单击列表的任何元素时，将弹出一个模式窗口。我已经尝试过此代码。如果我使用它的onClick事件，则可以很好地进行模式打开，但是如果我将其与ng-select一起使用，则它不起作用：

Answer 1

好的，我认为这里有两个问题。一个是您的JSON无效，无法重复运行。它应该是一个Object数组以获取详细信息。当我尝试使用JSON时，我能够以相同的方式运行： CODEPEN 像accntDetails = [{BankDetails1},{BankDetails2},{BankDetails}]

我想在选择Angular js中的列表项时显示一个模式窗口

1 个答案: