Hello currently I have a html form like that:
<div ng-controller="DemoCtrl">
<form name="myForm" action="/a/url">
....
</form>
<button ng-click="next(myForm)">Klick me</button>
</div>
is there a way to access the form action ?
what i suggest you not to provide action name in the form, instead of that within ng-click action javascript method in JS file either use $http service or $window service.
This can happen with the following htmlcode:
<div ng-controller="DemoCtrl">
<button ng-click="next(myForm)">Klick me</button>
</div>
JS Code:
$scope.next = function (formObject) {
// whatever you want to do
}
$scope will pick all the object defined within form tag.
I am also new in ng, if anything wrong here please correct me.
Related
How can I remove ng-class in angular js.
Here is my example code
<form name="myform" ng-class="plus">
//...
<button ng-click="save()">click</button>
</form>
and what I tried but does not work
$scope.add_page = function(){
$scope.myform.removeClass(plus);//what i try but not work
}
any suggest how to removed class or remove attribute ?
Just change it like this
<form name="myform" ng-class="{plus?'plus':''}" ng-init="plus=true">
//...
<button ng-click="save()">click</button>
</form>
and then in controller
$scope.plus=true;
$scope.add_page = function(){
$scope.plus=false;//what i try but not work
}
You can try the below method
<form name="myform" ng-app="myApp" ng-controller="myCtrl">
<div ng-class="plus">with class </div>
<button ng-click="clickme()">
click me to remove class
</button>
</form>
Js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.plus="plus";
$scope.clickme=function(){
$scope.plus="";
}
});
CSS
.plus{
background-color:red;
}
Working demo
Note :
You can do the same thing using other methods also.
1) Simply create a class using class instead of ng-class. ng-class is not required here, and then remove it by getting the particular element using id or via event
2) Angularjs is maid on top of javascript only so you can use any of the javascript syntax in angularjs(not a good practice)to remove class .
I have this code bellow and is working well, I would like to know how can make this variable show in my root-scope?
the problem is I am using now different controllers and directives
so:
if I put this in directive1:
Show
<button ng-click="showme=false">Hide</button>
and this in directive2 does not work:
<div class="wrapper">
<p ng-hide="showme">It will appear here!</p>
<h2 ng-show="showme">This is mah content, yo!</h2>
</div>
full code working if in the same directive html + angular
<div ng-app="">
<h1>Ng-show & ng-hide</h1>
<p class="description">Click on the "show"-link to see the content.</p>
Show
<button ng-click="showme=false">Hide</button>
<div class="wrapper">
<p ng-hide="showme">It will appear here!</p>
<h2 ng-show="showme">This is mah content, yo!</h2>
</div>
</div>
I heard about I can use something like: $rootScope but how I can implement this in that case? thank you.
You need to make sure show is set on the $rootScope. Convenient place for this is run block:
.run(['$rootScope', function($rootScope) {
$rootScope.show = false
}])
After that all scopes will inherit show from its parent.
Another option. You can actually directly refer to $rootScope from any of your template, this is probably simplest solution:
Show
<button ng-click="$root.show = false">Hide</button>
All I want to accomplish is to show a "loading ..." when the submit button is clicked using AngularJS.
I figured that should be quite easy using
<form ng-if="!export.buttonClicked">
... various input values without ng-model
<input type="submit" value="Start export" class="btn btn-default" ng-click="export.buttonClicked=true;">
</form>
<div ng-if="export.buttonClicked">
loading...
</div>
How could I be so wrong. Seems like Angular prevents the default form submission like this. Showing the loading div works quite fine, but I need the form to be submitted (The server has to calculate a lot so it responds slowly and I would like to show loading... instead of the Button once it has been clicked)
I can't use ng-submit because I have to combine AngularJS with Razor and I don't want no ng-form or ng-model...
Any ideas?
If you have an angular controller tied to the page or div, just use a function in your ng-click like this:
<div ng-controller="sampleController" style="text-align:center">
<button ng-click="buttonClickedFunction()">Submit</button>
<p>{{message}}</p>
</div>
Then in your controller:
yourAppName.controller('sampleController', function($scope) {
$scope.buttonClickedFunction = function() {
$scope.message = "Loading...";
// Whatever else you wish to do with your button/function.
};
});
This puts loading on the screen once button is clicked, if this is what you were shooting to do?
I'm using AngularStrap with bootstrap.
I have a modal dialog that uses it's own controller. How can I close the modal using this local controller?
I instantiate the controller on a button like this:
<button type="button"
class="btn btn-success btn-lg"
bs-modal="modal"
data-template="user-login-modal.html"
data-container="body"
ng-controller="userLoginController"
>Click here to log in</button>
and the userLoginController has this:
$scope.authenticate = function(){
this.hide(); // this doesn't work
}
This is obviously just a demo, I want it to close on successful login, but this is where the code I'd use to close it would go.
I've tried instantiating the modal programmatically (use the $modal service to create the modal) but I haven't been able to figure out how to inject the controller through that method.
If I were to do something like emit an event from the modal using the bs-modal directive, how can I reference the modal to close it?
here's my plnkr:
http://plnkr.co/edit/m5gT1HiOl1X9poicWIEi?p=preview
When in the on-click function do
$scope.myClickEvent = function () {
this.$hide();
}
Figured out a good method:
I moved the ng-controller to the TEMPLATE and instantiate the modal using the provided modal service. I then use a rootscope broad cast to let everyone know that someone successfully logged in.
new controller code:
var loginModal = $modal({template:'/template.html', show:false});
$scope.showLogin = function(){
loginModal.$promise.then(loginModal.show);
}
$scope.$on("login", function(){
loginModal.$promise.then(loginModal.hide);
});
the button just looks like this now:
<button type="button"
class="btn btn-success btn-lg"
ng-click="showLogin()"
>Click here to log in</button>
and my template has the old ng-controller in the first tag.
I am probably too late, but just wish to share my answer. If all you need is hiding the modal after form success, then bind that $hide function to one of controller varriable.
<div class="modal" data-ng-controller="Controller" data-ng-init="bindHideModalFunction($hide)">
In the controller:
// Bind the hiding modal function to controller and call it when form is success
$scope.hideModal;
$scope.bindHideModalFunction =function(hideModalFunction){
$scope.hideModal = hideModalFunction;
}
I found all of the above answers way too complicated for your use case (and mine when I ran into this problem).
All you need to do, is chain the ng-click to use the built in $hide() function that angular strap bundles.
So your ng-click would look like: ng-click="authenticate();$hide()"
Using Angular and bootstrap if you want to submit data to controller then have the modal close just simply add onclick="$('.modal').modal('hide')" line to the submit button. This way it will hit the controller and close the modal. If you use data-dismiss="modal" in the button submit never hits the controller. At least for me it didn't. And this is not to say my method is a best practice but a quick one liner to get data to at least submit and close out the modal.
<div class="modal fade" id="myModal" ng-controller="SubmitCtrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form ng-submit="submit()">
<input type="text" ng-model="name" />
<button type="submit" onclick="$('.modal').modal('hide')">Submit</button>
</form>
</div>
</div>
</div>
</div>
Perhaps open it with the service on click and have it close itself on the $destroy event?
$scope.openModal = function()
{
$scope.modal = $modal({
template: "user-login-modal.html",
container="body"
});
}
$scope.$on("$destroy", function()
{
if ($scope.modal)
{
$scope.modal.hide();
}
});
I have an Angular app that displays a ui.bootstrap.modal dialog when I click on a certain element. I want to make the modal logic reusable so have separated it into a separate controller. The result (simplified) looks like this:
<div ng-controller="MyController">
<button class="btn" ng-click="open()">Open me!</button>
<div ng-controller="ModalController" modal="shouldBeOpen" close="close()" options="opts">
...
</div>
</div>
The visibility of the modal is controlled by a property on ModalController:
$scope.shouldBeOpen = true;
How can I set that property from the open() method on MyController?