I want to implement AngularJS ng-class if condition is true how can achieve this task using below code. I am new to AngularJS Any help will be appreciated.
So far tried code....
main.html
<button type="submit" class="btn btn-primary"
ng-disabled="disableSubmitButton"
ng-class="{disableSaveCls:disableSubmitButton}"
ng-click="submitClicked()">Submit</button>
mainCtrl.js
if (PromiseObj.data.StatusLookUpCode === 'COMPLIANCE') {
$scope.disableSubmitButton = true;
};
Add '' in the class name
Try like this
ng-class="{'disableSaveCls':disableSubmitButton}"
DEMO
what you are doing is correct, but you should apply class like this,
ng-class="{'disableSaveCls':disableSubmitButton}"
within single quotes
Related
right now i'm using an ng-if to determine which button to show my users based on a condition. It just checks if my $scope.method matches the file variable.
<a class="btn btn-default" ng-if="method != file" ng-click="change(file)">Upload</a>
<a class="btn btn-primary" ng-if="method === file" ng-click="change(file)">Upload</a>
however im wondering if there is a more eloquent way to do this by using ng-class or any other angular directives...
Yes, you are correct. ng-class is what you are wanting.
<a class="btn" ng-class="{'btn-default': method != file, 'btn-primary': method === file}"
ng-if="method != file" ng-click="change(file)">Upload</a>
Here is a fantastic article I always reference when I'm needing to use ng-class.
You shall use ng-class to acheive that and add conditionnal class
https://docs.angularjs.org/api/ng/directive/ngClass
Am trying to add a class (blue) to a button when ever you hover the button using AngularJS.
HTML
<button class="btn-add-optimize" ng-mouseover="hover(iets)">Add and Optimize</button>
AngularJS
$scope.hover = function (iets) {
var Dit = this;
Dit.add("blue");
};
Anyone can help me out? Preferable a small example, it would be very appreciated!
I've used something like this with success:
<button
ng-class="{'some-class':hovering}"
ng-mouseenter="hovering=true"
ng-mouseleave="hovering=false">Add and Optimize</button>
Entering and leaving the button toggles $scope.hovering, and the application of some-class is contingent on the $scope.hovering scope variable being true.
<button
ng-class="{'some-class':hovering}"
ng-mouseenter="hovering=true"
ng-mouseleave="hovering=false">Add and Optimize</button>
You should use this form : ng-class
For Angular 8, this works for me:
<nav id="sidebar" [class]="!hovered ? 'active': ''" (mouseenter)='hovered=true' (mouseleave)="hovered=false">
I am using the following way to use $scope variable ({{func}}() in this case) as function name in ng-click.
<button type="button" ng-click="{{func}}()">Call {{func}}</button></pre>
This works in angularjs-1.2.0rc3. See working plunkr here
Any future version from > 1.2.0rc3 throw this error
What's changed? How can I use the above syntax in current angular version?
Ok first of all I do not recommend such a usage for ng-click because angularjs itself do not support this, but if you still want to use it such a way here is your solution...
<button type="button" ng-click="$eval(functionName)()">...</button>
where
$scope.f1 = function() {
...
};
//name of function as a string
$scope.functionName = "f1";
this is what your are looking for and here is your PLUNKER example...
All I did was append scope to both variables
<form name="angular" ng-controller="Ctrl">
<button type="button" ng-click="{{scope.func}}()">
Call {{func}}
</button>
<label>Status: {{scope.status}}</label>
http://jsfiddle.net/bebold/TmKLY/1/
I wouldn't advise going this route for dynamic variable change, a better choice would be to create a directive and do the binding within the template:
A great explanation can be found HERE.
What's the proper way to go about it. I need it to work like in the example below.
<input type="button" value="Resume" onclick="window.location = '/Test?testid=#(ViewBag.TestID)'" />
I absolutely support Zabavsky's comment that you should use an ActionLink for this specific example in order to have semantically correct markup.
But since you asked:
Mixing razor syntax with Javascript in views
Never do that.
In your view you should have only markup:
<input type="button" value="Resume" id="myButton" data-url="#Url.Action("Test", new { testid = ViewBag.TestID })" />
and javascript (IN A SEPARATE FILE) where you could work with this markup and unobtrusively enhance it:
$(function() {
$('#myButton').click(function() {
window.location.href = $(this).data('url');
});
});
Of course if the user has javascript disabled your web application is completely busted. That's why you should always write semantically correct markup. In this case that would be to use an anchor because in HTML buttons are used to submit forms, anchors are used to redirect to some other location (which is exactly what you are trying to achieve in this specific case).
I would, as Zabavsky said, use an ActionLink for this:
Something like this:
#Html.ActionLink("Resume", "Test", new { testid = ViewBag.TestID })
There are quite a few overrides for actionlink, so you need to pick the one which fits your needs.
The one above output an a href with the text 'Resume' going to action 'Test' on the current controller, passing a routevalue of testid = ViewBag.TestID
You can do it like:
<html><head><script>function newDoc() { window.location.assign("http://www.abc.com") }</script></head><body><input type="button" value="Load new document" onclick="newDoc()"></body></html>
Hope it will help. Thanks.
Well, what you wrote is valid.
You may have VS underline your code in red cause it think you have a js error due to the '' string not ended... but if you run it, it works.
To avoid red underline, you could do :
#{string js = "window.location = '/Test?testid="+ViewBag.TestID+" '";}
<input type="button" value="Resume" onclick="#js" />
Lets say I have button:
<button type="submit"
value="Send"
id="btnStoreToDB"
class="btn btn-primary start"
ng-click="storeDB()"
ng-disabled="!storeDB_button_state"
>
<i class="icon-white icon-share-alt"></i>
<span>Store to DB</span>
</button>
In JS to get this button I just do var btn = $('#btnStoreToDB'); and now can play with this button. So I can take it by id or class.
But how can I get this element with angularjs?
I want to add spinner to button during loading like showed here (Fiddle).
Since all my project I started to use angulajs only I try to do it wisely and do not like how do I know.
I thought to add: ng-model="btnStoreToDB" and use this:
if($scope.btnStoreToDB){
var spinner = new Spinner().spin();
$scope.btnStoreToDB.appendChild(spinner.el);
}
but $scope.btnStartUpload is undefined. Suppose there is other way to fetch this button.
Please, help
This is a good question, and a very common situation.
The Angular way of doing this is to use ng-show, ng-hide or ng-class on or within your button.
One idea might be to use ng-class like so:
<button ng-class="{ useSpinner: btnStoreToDB }">...</button>
This will add the class useSpinner to the button when btnStoreToDB is true, and remove the class when btnStoreToDB is false.
Another way would be to use ng-show like this:
<button ...>
<i class="icon-white icon-share-alt"></i>
<span>Store to DB</span>
<div class="spinner" ng-show="btnStoreToDb">...</div>
</button>
Now your view and controller are separated, and you are doing things the Angular Way.
angular.element("#btnStoreToDB");
But here is more "angular" way
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.loading = false;
$scope.send = function(){
$scope.loading = true;
setTimeout(function(){
alert('finished');
$scope.$apply($scope.loading = false);
}, 2000);
};
});
HTML
<button ng-click="send()">
<img ng-show="loading" src="http://farmville-2.com/wp-content/plugins/farmvilleajpl/img/loadingbig.gif" width='10'>
Send!
</button>
p.s. Image from cutom source
p.p.s personally I usually use Twitter Bootstrap and there is a way to show spinners easier. like <i class="icon-spin icon-spinner" ng-show="loading"></i>
See on Plunker