1

I want a dialog comes up on a button click and ask for two dates to enter and give me days difference back on my page on a label using angularjs. Can anyone help me on this?

5
  • Search for the ui bootstrap angularjs project includes a modal or a pop-over. Commented Apr 7, 2014 at 20:22
  • You should show some code first. Commented Apr 7, 2014 at 20:22
  • I am new to angularJs so I dont have much idea from where I can start. I dont have code to show you @developer3466402 Commented Apr 7, 2014 at 20:25
  • 1
    Here is a link that might help you angular-ui.github.io/bootstrap Commented Apr 7, 2014 at 20:28
  • @user3360944 your exmaple is the same one i am looking for. I want two dates values back in my container page and I am not able to do that. Commented Apr 7, 2014 at 22:56

2 Answers 2

4

This is an excellent solution for Bootstrap 3, Angular UI and Modal dialogs.

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

Sign up to request clarification or add additional context in comments.

Comments

3

I tried using @user3360944 example and it works for me, How can I select multiple items from the popup and add it to a table on the parent page? Here is my code

Parent Template : 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>

Popup Template : 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>

Script code :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');
        };
    };

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.