I am new to AngularJS and I would like to learn the best way to do this.
Here's my issue:
I have an anchor, that - after clicking on it - should toggle between classes "show-all" and "hide-all", and also update the css of a div.
Here's what i have so far:
<a class="{{state}}" href="#" ng-click="ToggleDisplay()"><p>{{stateTitle}}</p></a>
<div>CSS should be updated here</div>
And a bonus question: is there and easy way to transition the CSS change on the div (which is from height:200px to height:auto)?
to do a show all, hide all methods you can use the ng-show or the ng-hide methods, binding a keyword in it, you can make a method to use with the anchor to solve you're problem like that way
HTML
<a ng-click="showAll()">show all</a>
<p ng-show="hide">things to hide</p>
<p ng-show="hide">other things to hide</p>
JS
$scope.showAll=function(){
if($scope.hide==false){
$scope.hide=true;
}else{
$scope.hide=false
}
}
Another great way is the ng-class method where you can put a style code and make it a variable to change in your js file.
EDIT
a sample for ng-class:
<div ng-class="heightsample">i'm a div 100px's height</div>
<button ng-click="height-change()">change</button>
JS
$scope.heightsample={height:'100px'}
$scope.height-change=function(){
$scope.heightsample={height:'50px'}
}
Related
I am using Angular 1.4.7 and need to do the following
<div ng-if="varIsTrue">
<div ng-if="!(varIsTrue)" my-custom-directive>
A lot of content
</div>
So basically, if the div is set only the proper div shows up. I tried do a few variations of this with ng-if and ng-show but I believe because how the browser renders the dom it is messing it up with the multiple divs, but that is the concept I am going for. Does anyone know how I can accomplish this?
You cannot do this you should have 2 closing tags
<div ng-if="varIsTrue">
</div>
<div ng-if="!(varIsTrue)" my-custom-directive>
A lot of content
</div>
or you will have to switch in my-custom-directive
Given an html page with several anchors defined. Is there a way to show in tooltip part of this page between two specified anchors? And, how?
You can assume the html page is something like this:
<body>
<div>this is some text with tooltip when hovering</div>
<a name="a1"></a>
....
<a name="a2"></a>
....
<a name="a3"></a>
....
<a name="a4"></a>
</body>
So I want to hover on the div and see in the tooltip an html page between the two anchors a2 and a3.
The answer to this question gives a good way to show without using javascript, but just html and css. I would really prefer not using javascript, but please feel free to use it if that can greatly ease the task, and if you do so, please use no more libs other than jQuery.
I'm new to AngularJS. I'm developing a page with a couple of similar blocks but I don't really want to use ng-repeat for those. The thing is, in their ng-click, ng-class and other directives I need to use some variable identifying the block. Is there a way to set it once in parent div and then use in children? Something like this:
<div ng-var="Potatoes">
<button ng-click="buy($parent.var)">Buy</button>
<span>This is a {{$parent.var}}</span>
<img ng-class="{{$parent.var}}">
</div>
<div ng-var="Tomatoes">
<button ng-click="buy($parent.var)">Buy</button>
<span>This is a {{$parent.var}}</span>
<img ng-class="{{$parent.var}}">
</div>
I would use ng-repeat over a specifically crafted object but in this case I have to manually position some other things that I omitted in the code above so ng-repeat is not an option, unfortunately.
You can still use 'ng-repeat' then use of '$index' can differentiate each loop.
How can I hide an element below hide_below_element selector using Javascript.
<div class"hide_below_element">asdfasdfasd</div>
<div><a> the element for hiding form hide_below_element selector</a> </div>
<div><a>Another information no need to hide </a> </div>
Thanks for your supported us.
I'm not quite sure what you want to accomplish, but what about this :
$('.hide_below_element').next().hide();
I'm fairly new to AngularJS and trying to learn by doing.
There is a function in a directive I'm looking to access from the view. What I have in my HTML file is
<div collapse class="collapsed" ng-click="toggle()" ></div>
What's going on there is the toggle() function should be called on click and change the class to expanded, effectively changing the background image described in the CSS. toggle() is inside the collapse directive.
It doesn't seem to be accessing it though and I'm not sure why. Is there another way to do this or actually access said directive from the view? Could you explain why it's not accessing it?
Could this question possibly help? 15672709, it leads to this fiddle and goes beyond in case you nest your directives like below:
<div ng-controller="MyCtrl">
<div screen>
<div component>
<div widget>
<button ng-click="widgetIt()">Woo Hoo</button>
</div>
</div>
</div>
</div>