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?
-
Search for the ui bootstrap angularjs project includes a modal or a pop-over.shaunhusain– shaunhusain2014-04-07 20:22:10 +00:00Commented Apr 7, 2014 at 20:22
-
You should show some code first.Zini– Zini2014-04-07 20:22:38 +00:00Commented 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 @developer3466402user3421352– user34213522014-04-07 20:25:58 +00:00Commented Apr 7, 2014 at 20:25
-
1Here is a link that might help you angular-ui.github.io/bootstrapuser3360944– user33609442014-04-07 20:28:54 +00:00Commented 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.user3421352– user34213522014-04-07 22:56:55 +00:00Commented Apr 7, 2014 at 22:56
Add a comment
|
2 Answers
This is an excellent solution for Bootstrap 3, Angular UI and Modal dialogs.
Comments
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');
};
};