如何使用angularjs弹出窗口

时间:2014-04-07 20:19:46

标签: angularjs date dialog

我希望点击按钮时出现一个对话框,并要求输入两个日期,并使用angularjs在标签上给我带来日差。任何人都可以帮我吗?

2 个答案:

答案 0 :(得分:3)

这是Bootstrap 3,Angular UI和Modal对话框的绝佳解决方案。

http://codepen.io/m-e-conroy/pen/ALsdF

答案 1 :(得分:3)

我尝试使用@ user3360944示例,它适用于我,如何从弹出窗口中选择多个项目并将其添加到父页面上的表格中?这是我的代码

父模板:Mainpage.html

<div ng-controller="ItemCtrl" class="modal-body">
                    <button class="btn btn-default" ng-click="open();">Open Dialog</button>
                    <div ng-show="selected">{{ selected.Name}}</div>
                </div>

弹出模板:ItemSelectDlg.html

<table class="table table-hover grid">
    <thead class="tableheader">
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Payment</th>

        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in items" ng-click="selected.item = item">
            <td>{{item.Name}}</td>
            <td>{{item.Type}}</td>
            <td>{{item.Payment}}</td>

        </tr>
    </tbody>
</table>
Selected:
<b>{{ selected.item.Name }} </b>

<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

脚本代码:ItemCtrl

    $scope.items = $scope.ProductSet[0].Items;

    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl:'ItemSelectDlg.html',
            controller: ModalInstanceCtrl,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            //cancel
        });
    };

    var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

        $scope.items = items;
        $scope.selected = {
            item: $scope.items[0]
        };

        $scope.ok = function () {
            $modalInstance.close($scope.selected.item);
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    };