Disable angular button using ng-disable using $scope var in controller - javascript

I have two buttons in my view and I want to disable the Summary button until my view is loaded.
<div class="btn-group" ng-init="showData = 1">
<button ng-model="showData" type="button" ng-class='{"btn btn-primary": showData == 1, "btn btn-white": showData != 1}' ng-click="showData = 1">Headline</button>
<button ng-model="showData" type="button" ng-class='{"btn btn-primary":showData == 2, "btn btn-white": showData != 2}' ng-click="showData = 2; summaryCall()">Summary</button>
</div>
I have a variable $scope.loadMainView = false, this change to true when the response of a Web service is ok, so I want want to disable my button until that variable change to true, but I dont know how to
achive that. I was thinking on ng-init for a $scope variable to be initialized as false and then asing that to an ng-disable or something like that but I'm not sure, Im new in angular and maybe my
approach is not at all correct.
Some help will be great.

Use ng-disabled
<button ng-disabled="!loadMainView" type="button"></button>
This directive sets the disabled attribute on the element if the expression inside ngDisabled evaluates to truthy.
https://docs.angularjs.org/api/ng/directive/ngDisabled

using the ngDisabled directive is the right way to go
<button ng-disabled="!loadMainView" type="button"></button>

Related

more eloquent way to use conditional on buttons for angularjs

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

How to apply AngularJS ng-class based on condition?

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

Why is ng-disabled not working on button?

My Plunkr: http://plnkr.co/edit/4MkenJPczFbxy5aoillL?p=preview
<body ng-controller="mainCtrl as main">
<h1>Hello Plunker!</h1>
<p>Button should not be disabled:</p>
<div ng-init="main.btnDisabled = false">
<button ng-model="main.my_button"
ng-class="{ 'btn-success' : !tc.switching, 'btn-disabled' : tc.switching }"
disabled="main.btnDisabled"
type="button"
class="btn btn-info btn-sm switch-btn">My Button</button>
</div>
Angular
angular.module('app').controller('mainCtrl', function($scope) {
vm = this;
vm.btnDisabled = false;
});
I found this answer here, but it didn't work in my example.
The button is disabled because there is disabled attribute. This is enough for browser to know that element must be inactive. The value for disabled attribute doesn't matter, it can be anything.
This is exactly the reason why Angular provides ngDisabled directive, which adds disabled attibute when expression evaluates to true, and removes when it's false.
In your case you should use
<button ng-model="main.my_button"
ng-class="{ 'btn-success' : !tc.switching, 'btn-disabled' : tc.switching }"
ng-disabled="main.btnDisabled"
type="button"
class="btn btn-info btn-sm switch-btn">My Button</button>
There are a few problems that I see here.
First, change disabled to ng-disabled.
Second, when you click the button nothing will change/happen. Instead of putting that functionality into your ng-class, use something like ng-click to change the state.
This isn't contributing to your problem but make sure that you include $scope before passing it into your controller function.
Speaking of $scope, the plunker would be a bit easier to read if you put something on the scope instead of using a controller alias. No problem with that, it just might help you and other people debug your code.

Knockout enable binding not working

I can't get the enable binding to work in Knockout JS. With the enabled property set to false, the button is not disabled and I can still click it.
see fiddle
<a class="btn btn-xl btn-primary"
href="#"
role="button"
data-bind="enable: enabled, click: clicked, visible: isVisible">
<i class="icon-only icon-ok bigger-130"></i>
</a>
var ViewModel = function(){
var self = this;
self.enabled = ko.observable(false);
self.isVisible = ko.observable(true);
self.clicked = function(){
alert('You clicked the button');
};
};
$(function(){
var model = new ViewModel();
ko.applyBindings(model);
})
Enable binding does not work with anything you want.
This is useful with form elements like input, select, and textarea
It also works with buttons. Like in my example http://jsfiddle.net/5CbnH/1/
But it does not work with your link. You are using twitter bootstrap and they enable/disable their "buttons" with css classes. So you have to use css binding like this:
data-bind="css: { yourClass: enabled }"
Check what class is responsible in bootstrap for showing your "button" and modify your code accordingly with css binding.
Right:
✅ enable✅ disable
Wrong:
❌ enabled❌ disabled
Make sure you use disable instead of disabled and enable instead of enabled.
<input type="text" data-bind="value: foo, enable: isEditing"/> YES!!
<input type="text" data-bind="value: foo, enabled: isEditing"/> NO!
Easy mistake to make :-)
For people who might find this in a search:
I had a problem getting the enable binding to work as well. My problem was trying to use a complex expression without referencing the observables like functions:
<input type="button" data-bind="enable:AreAllStepsVerified && IsFormEnabled, click:SubmitViewModel"/>
Should have been:
<input type="button" data-bind="enable:AreAllStepsVerified() && IsFormEnabled(), click:SubmitViewModel"/>
See: https://stackoverflow.com/a/15307588/4230970
What Salvador said in his answer.
You must understand that the enabled and disabled binding in knockout work by putting a disabled attribute on the target DOM element. Now if you look at the HTML documentation you'd notice that not all HTML element support this attribute.
Actually only form elements (e.g. <button>) do. <a> does not.
I got it to work by changing the anchor tag to a button, not really sure why this makes it work, but it works nonetheless.
Updated fiddle.
<button class="btn btn-xl btn-primary"
role="button"
data-bind="enable: enabled, click: clicked, visible: isVisible">
<i class="icon-only icon-ok bigger-130"></i>
</button>

How to get element in angularjs analog of get by id in javascript?

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

Categories