I am new to Angularjs. I have 4 buttons "edit, Reset password, ok, cancel'. When the page loads I have to show edit and Reset password buttons. When I click edit "ok and cancel " buttons should be visible and "edit and Reset password" buttons should be hidden and vice versa. But when I click "Reset password" button popup should open. How can I do this?
Here is code:
<head>
<script src="js/libs/angular.min.js"></script>
</head>
<body>
<h3 align="center">ng-Click ng-Show demo</h3>
<div ng-init="showButton=false" ng-controller="buttonController">
<button ng-show="showButton" ng-click="toggle()">Edit</button>
<button ng-show="showButton" ng-click="showPopup()">Reset Password</button>
<button ng-hide="showButton" ng-click="toggle()">OK</button>
<button ng-hide="showButton">CANCEL</button>
</div>
<script>
function buttonController($scope){
$scope.toggle=function(){
$scope.showButton=!$scope.showButton;
};
$scope.showPopup=function(){
window.alert("Do want to reset?");
}
}
</script>
</body>
You can use ng-hide and ng-show for that.
<input ng-hide = "someVariable"> abc </input>
If "someVariable" is true then this input element will get hidden and will be visible if it is false.
For more: https://docs.angularjs.org/api/ng/directive/ngHide
Related
I am trying to hide a div when i clicked on outside it, below is my div
<div ng-show="item.showLimit" class="set-limit">
<input type="text" ng-model="item.newConcLimit" />
<div>
<button type="button" ng-click="item.newConcLimit = 0;">No Limit</button>
<button ng-disabled="!(item.newConcLimit >= 0)" type="button" ng-click="setConcLimit(item);">OK</button>
</div>
</div>
in controller I'm trying to set item.showLimit = false in window click function but it is not setting.
Try this out.
$(window).click(function(e){
$scope.item.showLimit = false;
});
Make sure you are adding this too. Otherwise the div will hide if you click inside the division also.
$('.set-limit').click(function(e){
e.stopPropagation();
});
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
In my controller I have input box and a div with text.
By default div is set to display:none
I want to make div visible by focusing on input box.
Is it possible to do with angular.js
Try this (No need to set you div display:none, initally showDiv is false and your div will be hidden):
<body ng-controller="myController" ng-init="showDiv=false">
<input type="text" ng-focus="showDiv=true">
<div ng-show="showDiv"></div>
</div>
Yea Angular makes it super easy without even having to write anything in controller, here's an example:
https://plnkr.co/edit/OqLpGxWwfPaBTVdTBYDy?p=preview
<body ng-controller="MainCtrl">
<input type="text" ng-hide="show" />
<button ng-click="show = !show">Show / Hide</button>
</body>
Obviously you could make yours on a hover instead of a click but you get the idea.
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.
Mobile Angular UI Is getting popular which is nothing but bootstrap 3 and angularjs combination
I would like to create a modal dialog box on button click and close the dialog on close icon, how to do it?
Based on the docs it says
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state='modal1'>
.....
</div>
</div>
But how to call this dialog, I tried this
<button ui-turn-on="modal1" class="btn btn-primary">Show Model</button>
But it is not working as expected, I am getting Warning: Attempt to set uninitialized shared state: modal1error
I think you have placed ui-content-for inside the ui-yield-to
Put it outside that div tag as follows
<div ui-yield-to="modals"></div>
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state="modal1">
....your model html code
</div>
</div>
So that modals will remain as a place holder