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
Related
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
I have this code bellow and is working well, I would like to know how can make this variable show in my root-scope?
the problem is I am using now different controllers and directives
so:
if I put this in directive1:
Show
<button ng-click="showme=false">Hide</button>
and this in directive2 does not work:
<div class="wrapper">
<p ng-hide="showme">It will appear here!</p>
<h2 ng-show="showme">This is mah content, yo!</h2>
</div>
full code working if in the same directive html + angular
<div ng-app="">
<h1>Ng-show & ng-hide</h1>
<p class="description">Click on the "show"-link to see the content.</p>
Show
<button ng-click="showme=false">Hide</button>
<div class="wrapper">
<p ng-hide="showme">It will appear here!</p>
<h2 ng-show="showme">This is mah content, yo!</h2>
</div>
</div>
I heard about I can use something like: $rootScope but how I can implement this in that case? thank you.
You need to make sure show is set on the $rootScope. Convenient place for this is run block:
.run(['$rootScope', function($rootScope) {
$rootScope.show = false
}])
After that all scopes will inherit show from its parent.
Another option. You can actually directly refer to $rootScope from any of your template, this is probably simplest solution:
Show
<button ng-click="$root.show = false">Hide</button>
Hello currently I have a html form like that:
<div ng-controller="DemoCtrl">
<form name="myForm" action="/a/url">
....
</form>
<button ng-click="next(myForm)">Klick me</button>
</div>
is there a way to access the form action ?
what i suggest you not to provide action name in the form, instead of that within ng-click action javascript method in JS file either use $http service or $window service.
This can happen with the following htmlcode:
<div ng-controller="DemoCtrl">
<button ng-click="next(myForm)">Klick me</button>
</div>
JS Code:
$scope.next = function (formObject) {
// whatever you want to do
}
$scope will pick all the object defined within form tag.
I am also new in ng, if anything wrong here please correct me.
I'm a noob about angular. I need a way to toggle only one element on a page.
Here is the plunker: http://plnkr.co/edit/W1eqgKiv5wv0hNkLDuzb?p=preview
If I click a button all the div are toggled/collapsed, but I need a way to collapse/toggle only the child element.
How about each model div controls its own destiny...
Plunker: http://plnkr.co/edit/rBCB9CflM7TsEEK5IAk1?p=preview
<div>
<button ng-model="collapsed1" ng-click="collapsed1 = !collapsed1">Toggle collapse</button>
<div ng-show="collapsed1">
<div class="well well-large">Some content</div>
</div>
</div>
I have an Angular app that displays a ui.bootstrap.modal dialog when I click on a certain element. I want to make the modal logic reusable so have separated it into a separate controller. The result (simplified) looks like this:
<div ng-controller="MyController">
<button class="btn" ng-click="open()">Open me!</button>
<div ng-controller="ModalController" modal="shouldBeOpen" close="close()" options="opts">
...
</div>
</div>
The visibility of the modal is controlled by a property on ModalController:
$scope.shouldBeOpen = true;
How can I set that property from the open() method on MyController?