I've found a great AngularJS directive 'angularSlideables' by #jbodily that does slideToggle() without need to include jquery.
http://jsfiddle.net/rh7z7w0a/2/
The directive used like this:
<div slider="is_open">Content initially hidden</div>
Div is toggled like this:
<button ng-click="is_open2 = !is_open2" >toggle content</button>
Thing is, the div is closed by default, what is the best way to change its initial state to be open?
Why not flip it?
<div slider="!is_closed">Content initially hidden</div>
<button ng-click="is_closed= !is_closed" >toggle content</button>
If you want to use is_open you'll have to set it to true in your controller first.
Related
So I'm trying to collapse a sidebar which I have stored as an angular element. I've tried using the toggle script in the template URL and in my page code but neither are doing it. On every other page of the site, I still have the sidebar in non-angular form and it is collapsing without a problem.
heres the problem
plunkr
<div ng-app="appHeaderApp">
<div ng-controller="sidebarcon">
<div ng-repeat="stab in mySideTabs">
<app-sidebar info="stab"></app-sidebar>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div>
The short answer for this is that you are not using Angular correctly. If you're using Angular, do things the Angular way :)
After inspecting your website, it looks like you are using a directive for the sidebar. The collapsing functionality is being controlled by the "toggled" class, so we can use ng-class to toggle this.
So we can do something like:
<div ng-class="{toggled: toggled}"></div>
This conditionally applies a class. Then in your button that toggles the sidebar, you can do something like:
<button ng-click="toggled = !toggled">Toggle Sidebar</button>
This button will toggled the "toggled" boolean back and forth, which will toggle the class on the sidebar.
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.
I am opening and closing some side (open and close under the title) using angular and I'm wondering if there is a way I can swap between classes When I'm doing this too so I can swap some css. Here's what I'm doing -
<form name="metaDeta" id="lessonDetails" class="lessonItem" ng-controller="detailsController">
<div class="small-12 columns">
<div class="lesonHead lessonHeadOpen saDetailsHead" ng-click="showDetails = ! showDetails" ng-class="myVar">
<h5>Lesson Details</h5>
</div>
<div class="lessonSASlider" ng-show="showDetails">
This works fine for opening and closing the form, however there is a class .lessonHeadOpen that I would like to try and toggle between .lessonHeadClosed. So basically I am looking for something like an addClass/removeClass even on click to toggle between the 2 classes on the element when the user opens and closes it. Is this possible with angular? Could I work off what I have or do I have to re-structure. Thanks!
You can use ng-class to dynamically add classes based on the result of expressions. Read ngClass
<div class="lessonHead" ng-click="showDetails = ! showDetails">
<h5>Lesson Details</h5>
</div>
<div ng-class="{className: showDetails}">
</div>
This directive will evaluate showDetails expression and if true, it will apply the class className
Update:
If I understand correctly, do the same but reverse the expression so if not showdetails add one class and then when show details is true it will be removed and the other class added. <div ng-class="{classOne: showDetails , classTwo: !showDetails}"> SEE FIDDLE
You can use ng-class for toggling.
Simply add a condition for a class to appear and it will based on the condition.
ng-class="{'className': shouldShowClass}"
You can use ng-class's ternary operator notation:
<div ng-class="showDetails? 'lessonHeadOpen': 'lessonHeadClosed'>...</div>
SAMPLE DEMO
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'}
}
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>