I have two buttons, one has a click event and redirects to login page.
Another button is simply used to show pop-up.But clicking on second button also redirects me to login page
This is my code
<div class="body"></div>
<div class="grad"></div>
<div class="header">
<div>MY<span>Demo</span></div>
</div>
<br>
<div class="register" ng-controller="RegisterUser">
<input type="text" class="margin-15" placeholder="Name" ng-model="user.name" name="user"><br>
<input type="text" class="margin-15" placeholder="Date Of Birth" ng-model="user.dob" name="user"><br>
<input type="text" class="margin-15" placeholder="Gender" ng-model="user.gender" name="user"><br>
<input type="text" class="margin-15" placeholder="Email" ng-model="user.email" name="user"><br>
<input type="text" class="margin-15" placeholder="Contact Number" ng-model="user.phn_number" name="user"><br>
<input type="text" class="margin-15" placeholder="username" ng-model="user.uname" name="user"><br>
<input type="password" class="margin-15" placeholder="password" ng-model="user.password" name="password"><br>
<a class="waves-effect waves-light btn-large" ng-click="registerUser()">Register</a>
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
</div>
I tried many possible ways, but it is not working for me.
If the second button that was supposed to open a modal is that
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
then it has no ng-click directive.
You should add an ng-click with a function that opens your modal instance
You can find an example here
The problem here is href="#modal". When you click the button, angular looks for "#modal" route in the route config. Since "#modal" route is not present it redirects you to default route.
Remove href and try to open modal using javascript. For example
<a class="waves-effect waves-light btn modal-trigger" ng-click="showModal()">Modal</a>
In controller:
$scope.showModal = function () {
//show modal
}
As per you described, first button/link is working fine and second button or link is also redirecting to login page.
first of all your second button is not doing this because of the first one, it is reacting like this because second link is searching for a page(treating #modal1 as a url) and if it won't find that page it will redirect to the landing page with having url like #/ .you can either redirect to a page with proper URL or you have to send it to a method by ng-click and provide a MODAL code there.
here is a plunk if you wanna redirect to some page on second click. Plunk
Related
When I click the button it works, but when I try to add "quantity" and click the arrows to do it - it immediately runs the function. How do I avoid it?
<form ng-click="ctrl.launch(quantity, someOtherInfo)">
<div class="quantity">
<input type="number" ng-model="quant" ng-init="quant=1" min="1" step="1">
</div>
<button class="hit_it_button" >LAUNCH!</button>
</form>
I tried to place ng-click right in the button, but it just doesn't work at all.
You should change ng-click to ng-submit.
Here is helpful link
your script should look like this I think:
<form>
<div class="quantity">
<input type="number" ng-model="quantity" ng-init="quant=1" min="1" step="1">
</div>
<button class="hit_it_button" ng-click="ctrl.launch(quantity)>LAUNCH!</button></form>
ngClick does not submit the form.You should change ng-click to ng-submit.
<form ng-submit="ctrl.launch(quantity, someOtherInfo)">
<div class="quantity">
<input type="number" ng-model="quant" ng-init="quant=1" min="1" step="1">
</div>
<button class="hit_it_button" >LAUNCH!</button>
</form>
I have a grid of students and a button. When a user clicks it, a new modal is shown.
In the modal there are some inputs and a button "save".
When a user clicks save via angular, the new student is added and the modal is closed.
I want to prevent the modal from closing when the input are not filled.
How can I do this?
In other words, I want the save button to not do the job of ng-click and data-dismiss="modal".
You can disable button if inputs didn't validated (required, max, etc.) like this:
<form role="form" name="formInTheModal" id="formInTheModal" class="form-horizontal">
<div class="form-group">
<label for="inpDummy" class="col-sm-4 control-label">Enter</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="inpDummy"
ng-model="inpDummy" maxlength="50" required>
</div>
</div>
<button type="button" class="btn btn-primary" ng-click="doJob()"
ng-disabled="formInTheModal.$invalid" > DO
</button>
</form>
Can anyone please suggest me How to implement a POP UP function in Angular + Node js?
I want to implement a login which should pop up when the user clicks login button.
Thanks
Depends on what CSS framework you are using. I often use Bootstrap, and the ui-bootstrap directives. This allows easy modal dialog display.
This is dummy html with bootstrap content that will trigger pop up on button click. You will notice I've placed ng-click directive on the login button, so you should just create angular function on your controller that is combined with this view.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modalExample">Login modal</button>
<div class="modal fade modalExample" tabindex="-1" role="dialog" aria-labelledby="myModallable">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form>
<div class="form-group">
<input type="email" class="form-control" ng-model="username" placeholder="Username" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" ng-model="password" />
</div>
<div class="form-group">
<button class="btn btn-default" ng-click="login(username,password)">Login</button>
</div>
</form>
</div>
</div>
</div>
This will handle your problem on the client side, and related to Node.js I suppose you will have some api controller that will listen for the request that you can send from angular factory that represents service.
Several ways of doing this either with jQuery or angular.js.
ngDialog plugin is available you can go through it if you want popup with pure angular.
According to the docs, pressing enter in a form would "trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)". Is there any way to instead set which button should be triggered?
I have a form in which pickadate.js creates some button elements before the submit button.
It doesn't matter how many buttons are before the submit button.
If you have ngSubmit directive on your form element function inside ng-submit="" will be fired.
For example.
<div ng-controller="MyCtrl">
<form ng-submit="processForm()" name="myFormName">
<input type="text" ng-model="myForm.name" placeholder="name" required="required"/>
<input type="text" ng-model="myForm.email" placeholder="email" required="required"/>
<input type="button" value="First button" ng-click="alert('First button')"/>
<input type="button" value="Second button" ng-click="alert('Second button')"/>
<input type="submit" value="Submit"/>
</form>
</div>
When you press the 'Enter' key (in my example) angular will call $scope.processForm function and you will see "Submitting form.." message.
$scope.processForm = function(){
alert("Submitting form..");
}
I've created JSFiddle example for you.
HTML
<input type="text" ng-model="email" ng-disabled="button" rquired>
<a class="btn" ng-model="button">edit</a>
So basically I want to enable the input field when the button is clicked. I could do this with some javascript but I want to figure out an easy way for this.
The above example does not work. Any ideas why?
You can use ng-click to change the value of button:
<input type="text" ng-model="email" ng-disabled="button" required ng-init="button=true">
<a class="btn" ng-click="button=false">enable edit</a>
<a class="btn" ng-click="button=true">disable edit</a>
<a class="btn" ng-click="button=!button">toggle edit</a>