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>
Related
I am new to AngularJS.
I have created <li> to which I used ng-repeat.
<li> contains images and buttons like like, comment and share which is inside <li> and created by ng-repeat.
I have made function which will replace empty like button to filled like button (By changing background image of button).
But problem is this trigger applies to only first like button and other buttons does not change.
How can I fix this?
Code:
HTML:
<html>
<body>
<ul>
<li ng-repeat="media in images"><div class="imgsub">
<label class="usrlabel">Username</label>
<div class="imagedb">
<input type="hidden" value="{{media.id}}">
<img ng-src="{{ media.imgurl }}" alt="Your photos"/>
</div>
<!-- <br><hr width="50%"> -->
<div class="desc">
<p>{{media.alt}}</p>
<input type="button" class="likebutton" id="likeb" ng-click="like(media.id)" ng-dblclick="dislike(media .id)"/>
<input type="button" class="commentbutton"/>
<input type="button" class="sharebutton"/>
</div>
</div> <br>
</li><br><br><br>
</ul>
</body>
</html>
JS:
$scope.like = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-filled.png)";
alert(imgid);
}
$scope.dislike = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-empty.png)";
}
Thanks for help & suggestions :)
The id for each button should be unique but in your case, it's the same for all buttons ('likeb').
You can set the value of the attribute 'id' for each button dynamically by using '$index' and passing '$index' to the functions as follows:
<input type="button" class="likebutton" id="{{$index}}" ng-click="like($index)" ng-dblclick="dislike($index)"/>
Then in your controller, you can use the functions with the passed value.
For example,
$scope.like = function(index)
{
document.
getElementById(index).
style.backgroundImage = "url(src/assets/like-filled.png)";
}
Another good alternative in your case would be to use the directive ngClass.
use 2 css class for styling liked and disliked state, and then put the class conditionally with ng-class instead of DOM handling. and if you really want to perform a DOM operation (I will not recommend) then you can pass $event and style $event.currentTarget in order to perform some operation on that DOM object.
I have div tag, on-mouseover i wish to change existing div color to other and vice versa for on-mouseout.
<div class="btn col-lg-3" style="color:white;" ng-mouseover="" ng-mouseout="" ng-class="">
<strong>ABOUT</strong>
</div>
How can i achieve this using angularjs? can anyone help me
<div class="btn col-lg-3" style="color:white;" ng-class="{'call-name':hovering}" ng-mouseenter="hovering=true"
ng-mouseleave="hovering=false">
<strong>ABOUT</strong>
</div>
<ion-view cache-view="false">
<div class="navbar-fixed-top navbar-header bar bar-header " ng-if="showHeader">
<div class="container row">
<div>
<a class="navbar-brand" href="#">
<h1>ROCK 'N' GRILL<br>
<span>Pitampura New Delhi...</span></h1>
</a>
</div>
{{showSubHeader}}
<div ng-if="showSubHeader===true" class="topPull" draggable >
<button ng-if="showSubHeader" class="button-icon"><img src="img/topImg.jpg"></button>
</div>
</div>
</div>
</ion-view>
The value of showSubHeader changes to false but yet I see the div in my view. How do I update view to not show the div when the value is false?
Edit:
This is veiw attached to an abstract state so I believe , the abstract state is not updated when views are switched. How do I reload header when views change or switch?
Instead of using ng-if you could use ng-show. So when showSubHeader is false, your div won't be shown. Have a look here: https://docs.angularjs.org/api/ng/directive/ngShow
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'm quite happy with the Angular UI Bootstrap Accordion, but I encountered a problem when creating a Accordion Group with no body. The Accordion will always create an empty body and I couldn't find a way to prevent this. Is there a way to prevent the creation of the accordion body or can the accordion group be created in a way that it is not expandable?
Plunker with example
Accordion Directive
The accordion directive builds on top of the collapse directive to
provide a list of items, with collapsible bodies that are collapsed or
expanded by clicking on the item's header.
As I stated in the comment, just use the Collapse directive and style it like an accordion.
Update:
Not styled to perfection but try this
HTML
<div ng-controller="CollapseDemoCtrl">
<div class="accordion-group" ng-click="isCollapsed = !isCollapsed">
<div class="accordion-heading">
<a class="accordion-toggle">Group with body</a>
</div>
</div>
<div collapse="!isCollapsed" class="collapse">
<div class="well well-large">Some content</div>
</div>
</div>
Controller
function CollapseDemoCtrl($scope) {
$scope.isCollapsed = false;
}
plunkr