I am using Bootstrap Modal. I need multiple action button for different purpose in a single Modal. I already have two button close and ok . i need another called submit or save.
<div class="modal-body">
<div class="row">
<div class="col-lg-8">
<select class="form-control" data-ng-model="review.sessionid" ui-select2 class="comboselection">
<option data-ng-repeat="review in modalOptions.reviews" value="{{review.oid}}">{{review.sessionName}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<textarea class="form-control" name="review.news" data-ng-model="review.news"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btnsubmit" type="submit" class="btn btn-primary" data-ng-click="modalOptions.ok(review)" ><i class="glyphicon glyphicon-ok"></i>{{modalOptions.actionButtonText}}</button>
<button class="btn btn-deafult" data-ng-click="modalOptions.close()"><i class="fa fa-times"></i>{{modalOptions.closeButtonText}}</button>
</div>
Close button is for close the modal. ok button is pass the object in controller via result variable of modalService.showModal(modalDefaults, modalOptions).then(function (result) . Here is my controller..
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Submit',
headerText: 'Review PMP',
reviews: reviewlist
};
var modalDefaults = {
templateUrl: 'app/partials/pmpReviewModal.html'
};
modalService.showModal(modalDefaults, modalOptions).then(function (result) {
var sessionName = result.sessionName;
var session = result.news;
console.log(sessionName);
});
But my problem is that how can i add another button for pass object for another purpose to the controller ?
Related
$modal is called in the $ngonint hook. First time when controller loads, it works perfectly. But for the second time, it is not showing up when the controller loads.
Expectation:
Consider two controllers first and second.
Navigate to second controller from first controller by clicking link.
We need to show below modal when page loads whenever navigate to second controller page.
Actual Result:
For the first time, when it navigate to second controller, it showed the modal as expected. once go back to first page and come again to second controller, modal is not showed up.
Can anyone help me to solve this issue ? Thanks.
Below are the code sample:
Controller
$onInit() {this.showModal();} // Need to show modal when page loads
public showModal= function () {
var modalInstance = $modal.open({
template: ModalTemplate,
controller: [
'$scope',
'$modalInstance',
function ($scope, $modalInstance) {
$scope.answer = '';
$scope.close = function () {
$modalInstance.dismiss();
};
$scope.next = function () {
$modalInstance.close($scope.answer);
};
},
],
windowClass: 'open-account'
});
modalInstance.result.then((response) => {
console.log(response);
})
}
ModalTemplate.html
<div class="modal-header">
<button type="button" class="close" ng-click="close()" aria-hidden="true">
<fa-icon icon="times" prefix="fal" class="close-fa fa-lg"></fa-icon>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<div class="form-group radio-group-label">
<label class="control-label">
Click
</label>
</div>
</div>
<div class="col-xs-2">
<div class="form-group">
<label class="control-label" for="answer-yes">
<input type="radio" name="answer" ng-model="answer" value="yes"
id="answer-yes" />
Yes
</label>
</div>
</div>
<div class="col-xs-2">
<div class="form-group">
<label class="control-label" for="answer-no">
<input type="radio" name="answer" ng-model="answer" value="no"
id="answer-no" />
No </label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-disabled="!answer" ng-click="next()">Next</button>
</div>
I need to add a button to my Form in which if I click that button it should show me a text area and a Submit button so after typing any text I will click the submit button it should print the checkbox in my form using AngularJS.
Same as in the above pic. I am new to typescript so help me to fix this
Use the ngClick directive:
<button ng-click="yourFunction()">OK</button>
https://docs.angularjs.org/api/ngTouch/directive/ngClick
Also, please read the documentation or a tutorial/example before you ask such a basic question...
<div data-ng-controller="homeController">
<div class="col-lg-1">
<span class="glyphicon glyphicon-plus-sign" style="cursor:hand" aria-hidden="true" title="Add More" ng-click="onEnable()"></span>
</div>
<div class="col-lg-5">
<input type="text" ng-if="isEnableTextBox" ng-model="model.label" name="dynamic" class="form-control">
</div>
<div class="col-lg-5">
<button type="button" class="btn btn-primary" ng-disabled="!model.label" ng-click="onAddCheckBox()">Submit</button>
</div>
<div class="col-lg-12">
<div class="checkbox col-lg-12" ng-repeat="checkBox in checkBoxes track by $index">
<input type="checkbox" name="name_{{$index}}" id="name_{{$index}}" ng-model="checkBox.selectedCheckBox" class="filled-in square chk-col-pink ng-pristine ng-untouched ng-valid ng-empty" checked="checked" aria-invalid="false">
<label for="checkBox.label">{{checkBox.label}}</label>
</div>
</div>
</div>
function init() {
$scope.isEnableTextBox = false;
$scope.checkBoxes = [];
$scope.model = {};
}
$scope.onEnable = function onEnable() {
$scope.isEnableTextBox = true; // Enable text box on Click Plus Icon
};
$scope.onAddCheckBox = function onAddCheckBox() { // On submit button click push the given name into array and empty the text box. Please refer the attached image.
var _checkBoxModel = angular.copy($scope.model.label);
$scope.model.label = "";
$scope.checkBoxes.push({'label': _checkBoxModel, 'selectedCheckBox': true});
};
init();
Sample Image
I am using angularstrap modal service to open a login modal on any page when login is required. I open one like this:
var scope = {'foo': 'bar'};
var myOtherModal = $modal({scope: scope, template: 'modal/login.html', show: false});
the login.html contains the modal markup but it also has a controller bound to it:
<div ng-controller="SignInController" class="modal" tabindex="-1" role="dialog">
<input ng-modal="foo"/>
In the controller code, how do I get access to the foo prop on the scope that I am passing in?
What is happening to my scope? Is a scope object created by $modal the one and the same that is used by the controller? It appears that its not the case.
What is the best way to solve this problem? (Ability to open a login dialog from anywhere and have control over its scope from the controller)
Thanks
Think of opening a modal as a function call... where you pass data in and get data back. It's not the ONLY way to approach it but I think it's a clean way to approach it.
I generally follow this pattern, giving the modal it's own controller & passing data in & getting data back by passing it into the promise:
var ModalController = function($scope, $modalInstance, input) {
$scope.input = input;
var output = {
username: "",
password: ""
};
$scope.ok = function () {
$modalInstance.close($scope.output);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
$scope.openModal = function(data) {
var modalInstance = $modal.open({
templateUrl: 'popupDialog.tpl.html',
controller: ['$scope', '$modalInstance', 'input', ModalController],
resolve: {
input: function() {
return data;
}
}
});
modalInstance.result.then(function(output) {
// TODO: do something with the output.username & output.password...
// call Login Service, etc.
});
};
EDIT: Adding popup html...
<form class="form-horizontal">
<div class="modal-header">
<h3>Please Log In</h3>
</div>
<div class="modal-body">
<form name="form" class="form-horizontal">
<div class="row">
<label class="col-sm-3 text-info control-label" for="inputUsername">Username</label>
<input class="col-sm-8 form-control input-sm" type="text" id="inputUsername" name="inputUsername" ng-model="output.username" />
</div>
<div class="row">
<label class="col-sm-3 text-info control-label" for="inputPassword">Password</label>
<input class="col-sm-8 form-control input-sm" type="text" id="inputPassword" name="inputPassword" ng-model="output.password" />
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-primary" type="submit" ng-click="ok()">Ok</button>
<button class="btn btn-sm btn-warning" ng-click="cancel()">Cancel</button>
</div>
</form>
I have two buttons on a simple login form in a dropdown on a header bar that is outside of the view/content part of my single page app. There are two buttons on the form:
EDIT: both buttons need to submit the form, but I have two different outcomes; one does new member sign-up, the other login existing members. I do not want to handle this on multiple partials.
My Website
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li class="divider-vertical"></li>
<li>
<div class="btn-group btn-group-xs navbar-btn btn-pad">
NL
FR
EN
</div>
</li>
<li class="divider-vertical"></li>
<!-- Begin Login Section -->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Signup/Login <strong class="caret"></strong></a>
<div class="dropdown-menu">
<div class="accountForm">
<!--form action="#" method="post" role="form"-->
<form name="loginForm" ng-submit="login()" ng-controller="homeController">
<div class="form-group">
<label class="control-label" for="username">Username</label>
<input type="text" ng-model="credentials.username" name="username" class="form-control input-sm" placeholder="username" required/>
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input type="password" ng-model="credentials.password" name="password" class="form-control input-sm" placeholder="password" required/>
</div>
<div class="form-group">
<label class="control-label" for="remember">
<input type="checkbox" class"form-control" name="remember" value="1"/>Remember me</label>
</div>
<div class="form-group btn-group-justified">
<div class="btn-group">
<button button-id="join" type="submit" class="btn btn-default">New? Join us</button>
<input type="hidden" class="btn" />
</div>
<div class="btn-group inline">
<input type="hidden" class="btn" />
<button button-id="login" type="submit" class="btn btn-primary active">Log in</button>
</div>
</div>
</form>
</div>
</div>
</li>
<!-- End Login Section -->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div id="page" ng-view>
The first button is intended to send the user to the login process (if they are already registered) and the second button is for new users to register.
The problem I have is that if I use the <form ng-submit="myFunction()"> directive, I haven't yet found a way to determine the button that was pressed.
I can alternatively create my own directive, where I can determine the button that was pressed, but this seems to be a lot of coding effort by comparison, and is this really the Angular way?
app.directive('buttonId', function() {
return {
restrict: "A",
link: function(scope, element, attributes) {
element.bind("click", function(){
// when attributes.buttonId = 'join'
//call the create script
// when attributes.buttonId = 'login'
//call the authenticate script
});
}
}
});
So my question is simply using ng-submit="myfunction()"can i determine which button was pressed?
I know I am answering my own question, but this seems to be the "correct" way to do this:
<form name="loginForm" ng-submit="login()" ng-controller="homeController">
<div class="form-group btn-group-justified">
<div class="btn-group">
<button type="submit" class="btn btn-default" button-id="join">New?Joinus</button>
<input type="hidden" class="btn" />
</div>
<div class="btn-group inline">
<input type="hidden" class="btn" />
<button type="submit" class="btn btn-primary active" button-id="login">Log in</button>
</div>
</div>
</form≥
The above is the section of the form that I'm interested in. Note that both buttons have type="submit"and not type="button" . This is important for two reasons:
1) you can use the standard HTML5 form validation options when you click the buttons
2) it forces the ng-submithandler.
First the controller
app.controller('homeController', function($scope){
$scope.buttons = { chosen: "" };
$scope.login = function (){
// can get the button that was clicked as it is now added to the scope
// by the directive
alert($scope.buttons.chosen);
};
});
... and now the directive.
Next I handle the click on either button using a directive. This has the purpose of allowing me to identify the button, and pass it to the $scope. This was actually the main purpose of the excercise, but I realised that I could now bind this to anything where I suspected a click and pass some data to the scope.
app.directive('buttonId', function() {
return {
restrict: "A",
link: function(scope, element, attributes) {
element.bind("click", function(){
// able to get the name of the button and pass it to the $scope
// this is executed on every click
scope.buttons.chosen = attributes.buttonId;
// alert(attributes.buttonId + scope.buttons.chosen);
});
}
}
});
I am not sure if i have understood your problem correct but you can differential based on
Calling different function for each ng-submit such as ng-submit="myFunction1()" and ng-submit="myFunction2()"
You can also do the same passing in context using a parameter ng-submit="myFunction(from)"
You can also pass in special $event object as parameter ng-submit="myFunction($event)". This object contains the target information.
You can get a handle to the $event in your ng-click, and get its target, and then get its id, but I wouldn't recommend that it is not the angular way of doing things:
<input type="submit" id="test" data-ng-click="showAlert($event)">
Click Me
</button>
$scope.showAlert = function(event){
alert(event.target.id);
}
Another way is to set property dirty for this button and then to check which of the buttons is dirty.
For example if you have a form named "myForm" you can write something like this:
<form name="myForm" id="myForm" ng-submit="save()" ng-model="myForm" novalidate>
<input type="submit" name="save" ng-model="btnSave" ng-click="(frmForm.save.$setDirty())" />
<input type="submit" name="saveOut" ng-model="btnSaveOut" ng-click="(frmForm.saveOut.$setDirty())" />
</form>
In Javascript file you can handle it by:
if ($scope.btnSave.$dirty){
alert("First was clicked)}
else{
alert("First was clicked)}
}
I have a small Angular application which repeats a list of project objects and allows editing each individual object.
// app.html
<div ng-controller="ProjectsCtrl">
<div ng-repeat="project in projects">
<!-- EDIT -->
<h3>{{ project.id }}</h3>
<h3>{{ project.title }}</h3>
...
<!-- END EDIT -->
<p>
<button class="btn btn-info" ng-click="updateProject(project); showEditProject=true">Edit Project</button>
<button class="btn btn-info" ng-click="showEditProject=false">Cancel</button>
...
</p>
<div class="box row animate-show-hide" ng-show="showEditProject">
<form name="editProjectForm" class="form-horizontal">
<input ng-model="editProject.title" type="text" id="title" name="title" class="form-control" placeholder="Title" required /><br />
...
</form>
</div>
</div>
</div>
// app.js
projectsApp.controller('ProjectsCtrl', function ($scope, $http, ConcernService) {
...
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.editProject = obj;
});
};
This all works fine but as each object is passed on the ng_clickall the editProject objects are bound to the same model. Is it possible to allow the form to open and each object is bound to each project independently?
Your updateProject method in the parent scope is just assigning project to editProject. You can just reference poject in the edit form. There is no need for the editProject field.
// app.html
<div ng-controller="ProjectsCtrl">
<div ng-repeat="project in projects">
<p>
<button class="btn btn-info" ng-click="updateProject(project); showEditProject=true">Edit Project</button>
<button class="btn btn-info" ng-click="showEditProject=false">Cancel</button>
...
</p>
<div class="box row animate-show-hide" ng-show="showEditProject">
<form name="editProjectForm" class="form-horizontal">
<input ng-model="project.title" type="text" id="title" name="title" class="form-control" placeholder="Title" required /><br />
...
</form>
</div>
</div>
</div>
// app.js
projectsApp.controller('ProjectsCtrl', function ($scope, $http, ConcernService) {
...
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.editProject = obj;
});
};
Put the updateProject function in another controller and attach that controller to the div that has the ng-repeat. For example:
projectsApp.controller('ProjectCtrl', funciton($scope, $http, ConcernSerice) {
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.editProject = obj;
});
};
}
and then:
<div ng-repeat="project in projects" ng-controller="ProjectCtrl">
...
</div>
The ng-repeat creates a scope for each project. This will makes it so that when you do $scope.editProject = obj; this will be done on this scope rather than on the single parent scope created by your ProjectsCtrl.
UPDATE:
If you need to be able to reset any edits you made you will need to save a copy of your object. You can probably do this in your updateProject:
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.previousValue = angular.copy(obj);
$scope.editProject = obj;
});
};
Then you would have to create a method for canceling that copies the values back:
$scope.cancel = function(){
$scope.showEditProject = false;
angular.copy($scope.previousValue, $scope.editProject);
};
Then call it from your template:
<button class="btn btn-info" ng-click="cancel()">Cancel</button>