In AngularJS, is there any way to make an ng-click dependent upon a boolean?
For example, I'd like the following text ("Click") to be clickable, but only when some scope property (e.g., $rootScope.enableClick) is true.
<div ng-click="count = count + 1" ng-init="count=0">Click</div>
Preferably, is there a straightforward way to do this without creating a custom directive?
Use the strange and wonderfull && logical operator in the ng-click expression:
<div ng-click="!stop && (count = count + 1)">Click me</div>
The DEMO
.clickable {
cursor: pointer;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="count=0">
<div ng-click="!stop && (count = count + 1)" class="clickable" >Click Me</div>
<div>Count={{count}}</div>
<input type="checkbox" ng-model="stop">Stop counting<br>
</body>
Update
Or use a button with the ng-disabled directive:
<button ng-click="count = count + 1" ng-disabled="stop" >Click Me</button>
The ng-disabled directive does not work with <div> elements. The disabled property is not a global attribute. The ng-disabled directive only works with <input>, <button>, <textarea>, and <select> elements as those elements support the disabled property.
The DEMO
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="count=0">
<button ng-click="count = count + 1" ng-disabled="stop" >Click Me</button>
<div>Count={{count}}</div>
<input type="checkbox" ng-model="stop">Stop counting<br>
</body>
Check this out, I have used the same method as #georgeawg used. The difference is that I have made it as a button format and used pointer-events: none so that no click event will be triggered from the .clickable
.clickable {
cursor: pointer;
display: inline-block;
width: 200px;
text-align: center;
padding: 10px;
background-color: #eee;
transition: all 0.3s ease;
margin: 10px 0;
}
.clickable:hover {
background-color: #ddd;
}
.test {
color: grey;
pointer-events: none;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="count=0">
<div>Count={{count}}</div>
<div ng-click="count = count + 1" ng-class="{'test': stop}" class="clickable">Click Me</div>
<div>
<input type="checkbox" ng-model="stop">Stop counting
</div>
</body>
Try
<div ng-click="count = count + 1" ng-init="count=0" ng-disabled="!enableClick">Click</div>
The ng-disabled directive sets the disabled attribute of a form field
(input, select, or textarea).
Related
I wanted to disable a div section using ng-disabled, but it dint work. I've also tried using fieldset in place of div.
ng-disabled seems not working.
Below is the view part:
<div ng-disabled="model.disableDate">
<div>Date</div>
<div ion-datetime-picker ng-model="model.timeEntryDate" ng-change="onTimeEntryDateChange()" date="true" time="false" monday-first="true" am-pm="true">{{model.timeEntryDate|| "Select" | date: "dd/MM/yyyy"}} <i class="icon ion-ios-calendar-outline"></i> </div>
</div>
This is the controller part:
if ($scope.model.pageState === condition) {
$scope.model.disableDate = true;
}
Any way this calender is being popped even on the disabling condition.
You can't disable DIV. Disable work with button and input types only. You can try with css. Use ng-class.
<div ng-class="{ 'div-disabled': model.disableDate}"> // give condition here as per your scenario
.div-disabled
{
pointer-events: none;
opacity: 0.5;
background: #CCC;
}
You can create an attribute directive to disable any div. See below:
var app = angular.module("myApp", []);
app.directive("disableSection", function() {
return {
restrict : "A",
link:function(scope,element,attr,ctrl){
element.css({
cursor :"not-allowed",
opacity: "0.5",
background: "#CCC"
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div disable-section>This is disabled div</div>
</body>
You can use pointer-events: none for disabling the div:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.obj = {};
$scope.obj.disabled = false;
$scope.clickMe = function(){
alert('div is enabled');
}
});
.disabled {
pointer-events: none;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-class="(obj.disabled)?'disabled':''" style="width:100px;height:100px;border:1px solid black">
<a style="cursor:pointer" ng-click="clickMe()">Click Me</a>
</div>
<button ng-click="obj.disabled = !obj.disabled">{{(obj.disabled)?'Enable':'Disable'}}</button>
</div>
I am using Angular animate to show a div when a button is clicked.
This is the button which shows the div:
<input type='button' value='+' ng-click=addRoom(x) ng-model="collapse">
This is the div which is shown when the button is pressed.
<div class="row coll" ng-show="collapse">
<div ng-repeat="data in room[x.room_type_id]">
Adult:<select ng-model="selAdultValue" ng-change="setAdultPrice(x)" >
<option ng-repeat="a in x.planNames">{{a}}</option>
</select>
</div>
<button class="btn pull-right" ng-class="{'btn-primary': book_status == 'AVAILABLE', 'btn-info disabled': book_status == 'NOT AVAILABLE'}" data-toggle="modal" data-target="#book_now" ng-click="afterTax()">Book Now</button>
</div>
This is working fine but the div is shown instantly instead of having a smooth transition.
Example of what I am trying to achieve:
Link
I have included the angular and angular-animate script in my HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
and Injected it in my Module
var app = angular.module('myApp', ['ngAnimate']);
Here's the addRoom function
$scope.addRoom = function(x){
$scope.collapse = true;
}
Here's the CSS:
.coll{
transition: all linear 0.5s;
}
What am I doing wrong?
Try adding height to the div by CSS. So, update your CSS to :
.coll{
transition: all linear 0.5s;
height: 100px;
}
Hope this works for you .
Thank you .
I am developing an ionic mobile application; when i click on a word, its description pops up beneath it, as shown here.
What I want to do is close the pop up whenever I slide the text or click anywhere on the page.
Is this doable in AngularJs? if yes, What should I use?
Thank you.
Have a invisible full screen layer behind the popup, on clicking which you can hide both description as well as invisible layer and show rest.
Check out this codepen : https://codepen.io/anon/pen/yOpXQw
HTML
<html>
<body ng-app>
<div id="main" ng-app ng-controller="appController">
<input type="button" ng-value="value1" />
<div id="invisible" ng-click="click()" ng-hide="hide"> </div>
<input type="button" ng-value="value" ng-hide="hide" />
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
#main{
height:1000px;
position:relative;
padding-top: 0px;
}
input
{
margin-top:100px;
padding-top: 50px;
position:absolute;
}
#invisible
{
height:100%;
width:100%;
position:absolute;
}
JS
function appController($scope){
$scope.value = 'Some Value from Scope';
$scope.value1 = 'another Value from Scope';
$scope.click = function()
{
$scope.hide=true;
alert("outside was clicked");
}
}
I would like to show and hide div using Angularjs, but i am new in Angular so need some help Thanks in Advance.
I want to fire event on click of this a tag
<div style="width: 50px; height: 50px; background-color: red;">I want to show this element</div>
<div style="width: 50px; height: 50px; background-color: red;">I want to Hide this element</div>
controller.js:
app.controller('MainCtrl', function($scope) {
$scope.showDiv = '1';
$scope.toggleShow = function(){
$scope.showDiv = !$scope.showDiv;
}
});
HTML:
<body ng-controller="MainCtrl">
I want to fire event on click of this a tag
<div ng-show="showDiv" style="width: 50px; height: 50px; background-color: red;">Show this element</div><br>
<div ng-hide="showDiv" style="width: 50px; height: 50px; background-color: green;">Hide this element</div>
</body>
Here is the Plunker: http://plnkr.co/edit/DWobFzvas9x4lhaoNfTI.
I have created a reusable directive and using it in two different forms but unable to able/disable the button in form which changes according to the check-box state in directive. I want disable the button until checkbox is not checked and disable it whenever check-box get unchecked.
My Fiddle
HTML
<div ng-app='demo'>
<form name="verification" ng-controller="myCtrl1">
<terms-conditions conditions="conditions"></terms-conditions>
<br>
<button class="btn-primary" ng-disabled="!checked" >Submit</button>
<hr>
</form>
<form name="bankinfo" ng-controller="myCtrl2">
<terms-conditions conditions="conditions"></terms-conditions>
<br>
<button class="btn-primary">Submit</button>
<hr>
</form>
</div>
JS
var demo = angular.module('demo', []);
demo.directive("termsConditions",function(){
return {
restrict:"E",
scope:{
conditions:'='
},
template:
"<div class='terms row'><span class='col-md-12'>{{conditions}}</span></div><br><input type='checkbox'><span>Yes, I agree to the terms and condtions</span>"
}
});
demo.controller("myCtrl1",function($scope){
$scope.conditions= " Payment terms" ;
})
demo.controller("myCtrl2",function($scope){
$scope.conditions= "Bank Terms" ;
});
CSS
span {
font-weight:bold;
}
.terms{font-weight: normal;
width: 500px;
height: 50px;
overflow-y: scroll;
padding: 5px 5px 5px 5px;
border-style: solid;
border-color: #666666;
border-width: 1px;
}
You almost got it right, you need to pass checked attribute value as the 2 way binding property and use ng-disabled.
<terms-conditions conditions="conditions" checked="checked"></terms-conditions> <br>
<button class="btn-primary" ng-disabled="!checked" >Submit</button>
Fiddle