on click on "toggle" i want to toggle the div
a) how to keep the div content by default open / show?
b) onclick how to toggle the class to achieve icon change from down to up?
Please refer the below fiddle:
http://jsfiddle.net/EhTZW/572/
HTML:
<h3>Toggle with AngularJS</h3>
<div ng-app id="ng-app">
<hr />
Toggle
<div ng-show="collapsed">I am description for the above title, which was collapsed by default</div>
<hr />
</div>
To change icon you can use ngClass
To make content visible by default , convert you ng-show to ng-hide
Try like this
Toggle
<div ng-hide="collapsed">I am description for the above title, which was collapsed by default</div>
DEMO
<h3>Toggle with AngularJS</h3>
<div ng-app id="ng-app">
<hr />
<!--use ng-class for conditions-->
Toggle
<!--ng-show to !collapsed for default open-->
<div ng-show="!collapsed">I am description for the above title, which was collapsed by default</div>
<hr />
</div>
you can use something like this
I am description for the above title, which was collapsed by default
You just need to set the value of collapsed=true at the beginning
Related
I only want to display the image div if the object returns an image, right now I'm outputting the image in my <div class="image">, however, if there's no image, then the <div class="image"> should not output:
<div class="image">
<img src="{{item.logo}}" alt="{{item.title}}" title="{{item.title}}" />
</div>
How about this?
<div class="image" ng-if="item">
...
</div>
See the documentation for ngIf.
You could also use ng-show, which will merely hide the div instead of removing it completely. See the documentation for ngShow.
I have a simple ng-repeat generating image divs. I want them to come out in rows of 4 instead of one long vertical list. How can I do this?
<div ng-repeat="artist in artists">
<div>
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
</div>
I believe you want to do something like this
<div style="width:800px;">
<div ng-repeat="artist in artists" style="width:200px;float:left;">
<div>
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
</div>
</div>
By having a container with a fixed width, and having each element inside be 1/4 of that width you can achieve what you want.
Of course, inline styles shouldn't be used in real code :)
You can use the $index property to add a tag every 4th item. Then use some CSS to display items as desired:
<div ng-repeat="artist in artists">
<div class="someClass">
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
<br ng-if="artist.$index % 4 == 0" />
</div>
One way is to use css properties. attach a class to the div with a float:left attribute, and insert a br tag after every 4th div
I guess you are using bootstrap?
If yes, this thread could do a help:
Bootstrap's grid columns number per row
doc for bootstrap grid layout:
http://getbootstrap.com/css/#grid-example-mixed
http://plnkr.co/edit/vmKoBHEKq0wP3du7gtps?p=preview
I want to write directive for hide submenu on click but it is not working properly.
Hover click on menu, Submenu are display but click on submenu I cannot manage hide all submenu
I'm not sure if you really need a directive for doing this. If you don't, you could use simply 'ng-hide' and 'ng-click' directives to make this works.
In the element you want to hide, put ng-hide="hideSubmenu" and in the element who will hide it, put a ng-click="hideSubmenu = true".
In your code:
<body ng-controller="MainCtrl">
<p>Hello name {{name}}!</p>
<div>
<div class="col-md-1" style="padding-left: 00px;padding-right: 350px">
<div class="cssmenu" ng-hide="hideSubmenu">
...
<li>Type</li>
<li>Request</li>
...
</div>
</div>
</div>
</body>
I am trying to add a switch to my partial view, it works as long as I am not switching the views using the ng-include. any idea why its breaking?
example in the plnkr code
basically this is what i am doing there:
<div ng-app="myApp">
<div ng-controller="RootController">
{{MyText}} : {{subview}}
<button ng-click="SelectAdmin()">Administration</button>
<button ng-click="SelectOperation()">Operations[Breaks!]</button>
<br/>
<div ng-switch="subview">
<div ng-switch-when="operations">
<div ng-include src="'./_partial.htm'"></div>
</div>
<div ng-switch-when="administration">
SHOWING :{{subview}}
<div class="make-switch switch-large">
<input type="checkbox" checked="" />
</div>
</div>
</div>
</div>
</div>
EDIT 1
To describe the issue a bit more:
When I start the page, I show the div that is not in the partial. i,e, set the subview = admionistrator and see an views as below.
now when i click on the "Operations" button i switch the view but use ng-include to load the partial view. and the partial view is actually showing the same content, but the view is messed up as seen in the image below.
Now even when i switch back to the earlier view by clicking on the Administrator button the make-switch is still broken.
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>