How can I prevent AngularJS to not click on an HTML button tag that has "disabled" attribute?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button type="button" disabled ng-click="something()">No Click Please!</button>
In this case, something() should NOT be called.
You pass an expression that has to be evaluated in the ngClick directive. If it is not evaluated true then something() will not be called.
Heres an example:
(function() {
angular.module('MyApp', [])
.controller('MyController', MyController);
MyController.$inject = ["$scope"];
function MyController($scope) {
$scope.disabled = true;
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="MyApp">
<div data-ng-controller="MyController">
<button type="button" ng-disabled="disabled" ng-click="disabled || something()">No Click Please!</button>
<button type="button" data-ng-click="disabled = !disabled">{{disabled ? 'Enable' : 'Disable'}}</button>
</div>
</div>
Notice you can also use the ngDisabled directive so that if $scope.disabled is true, something() will not be called and the button will also be disabled!
Proper way is to use ng-disabled which is a default directive in angular and using a scope variable to handle it to make it disabled,
HTML:
<button ng-click="disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">No Click Please!</button>
JS:
$scope.isDisabled = false;
$scope.disableClick = function() {
alert("Clicked!");
$scope.isDisabled = true;
return false;
}
EDIT
As papakia's mentioned, check the boolean variable and function so that it will not get executed.
DEMO APP
This solution works in AngularJS for any and all click targets using the built-in disabled attribute for form inputs and/or other elements using Bootstrap's .disabled class and it works without adding to the controller.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button type="button" disabled="disabled" data-ng-click="something($event)">No Click Please!</button>
JavaScript
function something( $event )
{
var is_enabled = !angular.element( $event.currentTarget ).is( '.disabled,:disabled' );
if( is_enabled )
{
}
}
Use ng-disabled.
<md-button ng-disabled="true"> Disabled Button </md-button>
EDIT ...
Fiddled
Related
I have used 2 button in the form. I want to disable button1 on initialisation though I have given ng-disabled="true" but whenever user clicks on button2, button1 get enabled. Can anyone tell me how to do this in angularjs ?
You don't need to do anything in the controller if you are not working with the scope variable inside the controller.
So just do something like:
angular.module("app",[]).controller("ctrl",function($scope){})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button ng-disabled="first !== true"> one</button>
<button ng-click="first = true"> two</button>
</div>
You can call one function on click of second button and set the ng-disabled value to false.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.inactive= true;
$scope.enableButton1 = function() {
$scope.inactive= false;
}
});
<div ng-app="myApp" ng-controller="MyCtrl">
<br><input type="button" ng-disabled="inactive" value="button1"/>
<br><input type="button" ng-click="enableButton1()" value="button2"/>
</div>
use scope variables and assign them to ng-disabled
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.firstBtn = true;
$scope.secondBtn = false;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button ng-disabled="firstBtn" > one</button>
<button ng-disabled="secondBtn" ng-click="firstBtn = false"> two</button>
</div>
Its very simple as given below:
JS
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.isDisabled = true;
$scope.toggleButton = function() {
$scope.isDisabled = !$scope.isDisabled;
}
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl'>
<button ng-click='toggleButton()'>
Toggle
</button>
<button ng-disabled='isDisabled'>
I am button
</button>
</div>
</div>
Here is the jsfiddle link Jsfiddle demo
I have HTML code with inline element:
<span class="title" ng-click="update()">Rock</span>
How to replace this element on input element after click for edit?
And then after push enter on input return back span element?
I tried with directives ng-hide(), ng-show(). But I wonder
You can use either
<span class="title" ng-hide="isEdited" ng-click="update()">Rock</span>
or
<span class="title" ng-show="!isEdited" ng-click="update()">Rock</span>
or even
<span class="title" ng-if="!isEdited" ng-click="update()">Rock</span>
In any case you will want to reference something that can be truthy. For example in your controller you would have something like this in your function
/*the init function just makes sure that everything is setup
and nothing caries over from any local storage or anything
else you may be using*/
init();
init function(){
$scope.isEdited = false;
}
$scope.update = function(){
$scope.isEdited = true;
}
What you need to do is set a variable that contains the state;
<html>
<body ng-app="app">
<div ng-controller="mainController as $ctrl">
<span ng-if="!$ctrl.isInEditMode" class="title" ng-click="$ctrl.update()" ng-bind="$ctrl.spanText"></span>
<div ng-if="$ctrl.isInEditMode">
<input type="text" placeholder="Value for rock" ng-model="$ctrl.spanText" />
<button ng-click="$ctrl.update()">Done</button>
</div>
</body>
</html>
angular.module('app', [])
.controller('mainController', function($scope) {
this.isInEditMode = false;
this.spanText = 'Rock';
this.update = (function() {
this.isInEditMode = !this.isInEditMode;
}).bind(this);
});
I have prepared a Codepen that shows an possible solution: http://codepen.io/stefferd/pen/QdQrrv
I have a field which on blur displays a tooltip. But I don't know why it also pops up when I click on the field.
Here is the codepen example: http://codepen.io/Octtavius/pen/aZzyKw?editors=1010
Below is the code where I use angular bootstrap:
<body ng-app="ui.bootstrap.demo" class='container'>
<input type="text"
ng-controller="myPopoverCtrl"
popover-template="myPopover.templateUrl"
popover-title="This is a popover"
popover-placement="bottom"
popover-is-open="myPopover.isOpen"
ng-blur="myPopover.open()" />
<script type="text/ng-template" id="myPopoverTemplate.html">
<h2 ng-bind="myPopover.data"/>
<button class="btn btn-success" ng-click="myPopover.close()">
Close me!
</button>
</script>
</body>
Controller
app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller(
'myPopoverCtrl', ['$scope', function($scope) {
// query popover
$scope.myPopover = {
isOpen: false,
templateUrl: 'myPopoverTemplate.html',
open: function open() {
$scope.myPopover.isOpen = true;
$scope.myPopover.data = 'Hello!';
},
close: function close() {
$scope.myPopover.isOpen = false;
}
};
}
]);
Can anyone help to understand why the tooltip popup on click when I set it to popup on blur/when leave the field???
That's because default trigger for popover is click: https://angular-ui.github.io/bootstrap/#/popover.
Try to disable it by popover-trigger="none"
I have HTML code with ng-click event:
<div class="btn share" ng-click="do($event)">
<span">1</span>
</div>
Angular JS:
$scope.do = function (event) {
var target = angular.element(event.target);
var parsed = parseInt(target.find('span').text(), 10);
}
When I click to element div or child element span is called event do().
But if I click on span my counter inside span is not increment. Only by clicking parent element div.
How I can set same $event for div and span elements?
I would recommend to work with scope bindings instead of DOM textContent:
<div class="btn share" ng-click="do()">
<span>{{count}}</span>
</div>
and in controller
$scope.count = 0;
$scope.do = function () {
$scope.count++;
};
If you however still want to know why it failed with your approach, it's because you need to use currentTarget, not just target:
angular.module('demo', []).controller('MainCtrl', function($scope) {
$scope.do = function(event) {
var target = angular.element(event.currentTarget);
var parsed = parseInt(target.find('span').text(), 10);
target.find('span').text(parsed + 1);
};
});
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<div ng-app="demo" ng-controller="MainCtrl" class="btn share" ng-click="do($event)">
<span>1</span>
</div>
But don't do this, controller should not work with DOM at all, this is
not what controllers are for.
You're doing it the wrong way. Angular is not jQuery. You shouldn't do any DOM manipulation in the controller. The view should be generated based on the model, and not vice-versa.
The code should be
<div class="btn share" ng-click="do()">
<span>{{ counter }}</span>
</div>
and in the controller:
$scope.counter = 1;
$scope.do = function() {
doSomethingWithCounter($scope.counter);
}
Have you tried adding the same click event to your span also?
Like this
<span ng-click="do($event)"> 1 </span>
Running through an example from the book, AngularJS, why does clicking the Reset button result in the alert, sorry, please get more customers.?
I only want the alert to occur when pressing the Fund my startup! button.
<html ng-app>
<body>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">
</script>
<form ng-submit="requestFunding()" ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate">
Recommendation: {{needed}}
<button>Fund my startup!</button>
<button ng-click="reset()">Reset</button>
</form>
<script>
function StartUpController($scope) {
$scope.computeNeeded = function() {
$scope.needed= $scope.startingEstimate * 10;
};
$scope.requestFunding = function() {
window.alert("sorry, please get more customers.");
};
$scope.reset = function() {
$scope.startingEstimate = 0;
};
}
</script>
</body>
</html>
You need to prevent the default button on-click behavior (which is submit)
The most explicit way in angular:
Following is a one way. (You could create a directive for this purpose, too.)
template:
<button ng-click="reset($event)">Reset</button>
javascript:
$scope.reset = function( event ) {
event.preventDefault();
$scope.startingEstimate = 0;
};
somewhat implicit way in general html:
<button type="button" ng-click="reset()">Reset</button>
This works by overriding the type attribute of button element
which happens to be 'submit'.