I need to display a tooltip on a disabled button and remove it if it is enabled using AngularJS.
Assuming you're using angular-ui-bootstrap:
http://plnkr.co/edit/vA7sizeDWwyC7KxeuGel?p=preview
<body ng-controller="MainCtrl" ng-app="plunker">
<div style="height:100px"></div>
<div uib-tooltip="asdsad" tooltip-enable="disableButton" style="display:inline-block">
<button ng-disabled="disableButton" ng-style="{'pointer-events':disableButton ? 'none' : ''}">Hover over me!</button>
</div>
<br>Check the checkbox to disable the button <input type="checkbox" ng-model="disableButton">
</body>
You can use these properties to enable/disable tooltips
$('[rel=tooltip]').tooltip('disable') // Disable tooltips
$('[rel=tooltip]').tooltip('enable') // (Re-)enable tooltips
Now you can use something like
$('[rel=tooltip]').tooltip('if button active' ? 'disable' :'enable')
Now to do all this in angular
just create a $scope.btnValid variable (if using angularjs 1) and pass it to ng-disabled property. This value will change as you want from some function
Now just use this value to enable/disable your tooltip like this
$('[rel=tooltip]').tooltip($scope.btnValid ? 'disable' :'enable')
Hope this helps
you can try this below code,
<div class="tooltip-wrapper" ng-repeat="item in itemDetails" title="
{{item.name + (isDisabled(item.name)?' is not available' : '')}}">
<button ng-disabled="isDisabled(item.name)" class="btn btn-primary"
ng-click="select(item)">{{item.name}}</button>
</div>
demo : http://plnkr.co/edit/Hh1kH7HLatrQj76gFQ2E?p=preview
Related
I am new to AngularJS.
I have created <li> to which I used ng-repeat.
<li> contains images and buttons like like, comment and share which is inside <li> and created by ng-repeat.
I have made function which will replace empty like button to filled like button (By changing background image of button).
But problem is this trigger applies to only first like button and other buttons does not change.
How can I fix this?
Code:
HTML:
<html>
<body>
<ul>
<li ng-repeat="media in images"><div class="imgsub">
<label class="usrlabel">Username</label>
<div class="imagedb">
<input type="hidden" value="{{media.id}}">
<img ng-src="{{ media.imgurl }}" alt="Your photos"/>
</div>
<!-- <br><hr width="50%"> -->
<div class="desc">
<p>{{media.alt}}</p>
<input type="button" class="likebutton" id="likeb" ng-click="like(media.id)" ng-dblclick="dislike(media .id)"/>
<input type="button" class="commentbutton"/>
<input type="button" class="sharebutton"/>
</div>
</div> <br>
</li><br><br><br>
</ul>
</body>
</html>
JS:
$scope.like = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-filled.png)";
alert(imgid);
}
$scope.dislike = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-empty.png)";
}
Thanks for help & suggestions :)
The id for each button should be unique but in your case, it's the same for all buttons ('likeb').
You can set the value of the attribute 'id' for each button dynamically by using '$index' and passing '$index' to the functions as follows:
<input type="button" class="likebutton" id="{{$index}}" ng-click="like($index)" ng-dblclick="dislike($index)"/>
Then in your controller, you can use the functions with the passed value.
For example,
$scope.like = function(index)
{
document.
getElementById(index).
style.backgroundImage = "url(src/assets/like-filled.png)";
}
Another good alternative in your case would be to use the directive ngClass.
use 2 css class for styling liked and disliked state, and then put the class conditionally with ng-class instead of DOM handling. and if you really want to perform a DOM operation (I will not recommend) then you can pass $event and style $event.currentTarget in order to perform some operation on that DOM object.
i have angularJS 1.5.0-rc.2
I found on the internet that i can use the directive
data-ng-disabled="Expression"
But it won't disable a button.
What i tried :
<button data-ng-disabled="false">Select</button> // don't work
<button data-ng-disabled="loaded">Select</button> // don't work
<button data-ng-disabled="loaded != false">Select</button> // don't work
Loaded is defined in my controller as $scope.loaded = false.
How can i disable a button ? Thanks
The button will be disabled only if the expression is true.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="disableBtn=true">
<button ng-disabled="disableBtn">test</button>
</div>
I make it without derective. I made it like this:
remove
In controller first of all made
$scope.disabled = true;
Than in if/else remove class disabled and change $scope.disabled = false;
I give you example with tag <a></a> this work with button simple.
And in button ng-click first made Test ng-click="disabled||usertaskctrl.removeTasksToArchive()" before make click on some you function.
Try this
1 This is direct method of implementation
<script>src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<button ng-disabled=true>test</button>
</div>
2 another way you can change the value for
<div ng-app>
<button ng-disabled=dsblBtn>test</button>
</div>
in controller inside init function
$scope.dsblBtn = true;
Always use the button tag with ng-disabled in angular js otherwise it will not work.
I want to conditionally enable/disable a tooltip on a button.
I have done this to test the disable state:
<button type="button"
uib-tooltip="test" tooltip-is-open="false">
</button>
But the tooltip shows.
How to disable the tooltip?
Thank you
You can use tooltip-enable="flag" where flag is a Boolean value set in your controller based on your business logic
And here is a plunker for tool-tip enable/disable
What is the problem in it? It's clearly given in the docs with an example.
You should be using tooltip-is-open flag.
var app = angular.module("sa", ["ui.bootstrap"]);
app.controller("FooController", function($scope) {
$scope.tooltipState = false;
$scope.toggleTooltip = function() {
$scope.tooltipState = !$scope.tooltipState;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div ng-app="sa" ng-controller="FooController">
<button class="btn btn-primary" type="button" uib-tooltip="Hello!" tooltip-placement="right" tooltip-is-open="tooltipState">I'll have a tooltip
</button>
<br>
<br>
Toggle tooltip
<br>
Toggle tooltip without scope method
</div>
This scenario doesn't quite match up with what you were looking for, but I found that I needed to use a combination of tooltip-trigger="none" and tooltip-is-open. For example:
<form name="formName">
<input name="inputName" type="text" required uib-tooltip="Required*" tooltip-placement="left" tooltip-trigger="none" tooltip-is-open="formName.inputName.$touched && formName.inputName.$invalid" />
</form>
Hopefully it will help someone.
I've created a demo in Plunker
, which I use angular-ui collaspe to work on bootstrap panel,
but it seems the ui animation not work well, when I click the title bar to collaspe, the panel-body will animate to its default padding 15px, then disappear immediately. And if I remove the padding of panel-body, the animation looks smoothly. So how can I remain the padding and fix the animation issue?
You should put your panel-body inside another tag with panel-collapse class, like this:
<div class="panel-collapse" collapse="collaspe1">
<div class="panel-body">
<div class="group-item" ng-repeat="group in recommendedGroups">
<span>{{group.name}}</span>
<button type="button" class="btn btn-danger btn-xs pull-right">Add</button>
</div>
</div>
</div>
See updated demo. I got this clue from markup for Accordion.
I have one DIV that is have under the ABC controller, and I have another button That is under the XYZ controller when i clicked on the button the DIV should me hide using ng-class ex( ng-class="{ 'hidden': showDetails }")
Please help me on this
this should work:
<button ng-click="hideDiv=true">hide the button</button>
<div ng-hide="hideDiv">Div that will be hidden</div>
<div ng-init="hideIt = false"></div>
<button ng-click="hideIt =true">click me</button>
<div ng-if="hideIt">Div to hide</div>
or
inorder to use ng-class
<div ng-init="hideIt = false"></div>
<button ng-click="hideIt =true">click me</button>
<div ng-class="{'hidden': hideIt}">Div to hide</div>
hope this help!
we can use angular services or factory to share the data between multiple controllers, so u can use services or factory in your case also,
here is the service Demo