I use collapse plugin from Bootstrap, and i also want to change class for another element accordingly (change class of fa-icon).
I also use AngularJS and i liked the idea of using condition in ngClass like this:
<i ng-class="collapsableItemId.hasClass('in') ? 'fa-chevron-up' : 'fa-chevron-down'">
When item is not collapsed bootstrap adds in class to it. I want to try to change icon based on class presence in collapsable item, but did not succeed in it. In bootstrap manual there is also mentioned that collapse generates events which i could probably use, but i also do not know how.
It should work like this. Use ng-click on the collapse toggle element to change some other scope var and then use that var in the ng-class of the icon..
<a href="" data-toggle="collapse" data-target=".collapse" ng-click="isOpen=!isOpen">
<i class="fa" ng-class="(isOpen) ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
</a>
<div class="collapse in">
I'm the collapsible element.
</div>
http://www.bootply.com/nqLf22HCli
<i ng-class="{'fa-chevron-up': abc.isOpen ,'fa-chevron-down': !abc.isOpen }"></i><div ng-show="abc.isOpen">Hi..This div will be show hide and icon will be change accordingly</div>
Use ng-click on collapsing header and put that div which you want to collapse
add ng-show="abc.isOpen".
Related
I want to load a modal using custom directive when a hyperlink is clicked. but the thing is that hyperlink already defined a ng-click function. Current ng-click function also should work my requirement. How can I do it without changing the ng-click function? Below is my hyperlink.
<a href="#" class="book-btns add-to-cart" data-ng-click="service.addToCart(hotel)" >Add to cart & Continue> </a>
href="javascript:;" should work to disable the default link behaviour.
Create the custom directive so that it binds to "click" on the element.
I have the $scope object (array of objects) like this
$scope.parts = [];
(content of $scope.parts is changing during 'run-time', not just filled once per page load)
Later, it some custom directive i show those parts in such manner:
<li ng-repeat="part in parts">
<span>{{part.name}}
<i class="fa fa-check"
tooltip="some tooltip"
...
</i>
</span>
</li>
According to some logic, i want to change 'fa-' class and tooltip text.
I can do it like this
<i class="fa"
ng-class="haveDescr(part.name)"
//and in directive's controller
$scope.haveDescr = function (partName) {
return someCondition ? 'fa-check' : 'fa-question-circle';
};
and so on for the tooltip, and... for every attribute i want to change?
Is there a better way, than to write a scope "check-function" for every attribute? How can i trigger changes in every single part/property of $scope.parts and do the DOM changes described above? What is the right "angular way" for this? Or, maybe it is possible to 'intercept' ng-repeat action and do everything there?
You can use ng-class with an 'object' expression.
<i class="fa" ng-class="{'fa-check' : part.name, 'fa-question-circle' : !part.name}">
You can use ng-class and title
<i ng-class="{'fa-check':showFaCheck(part.name), 'fa-question': !showFaCheck(part.name) }" title="{{getTooltip(part.name)}}"/>
Fiddle http://jsfiddle.net/4PYZa/303/
For every element in ng-repeat I need to display an icon with it.That is for each div a different icon should be displayed depending on the content.What is the right way to go about it?
Here is the code:
<div class="overview">
<i class="fa fa-{{}}"></i>
<div class="overflow-h padding-top" ng-repeat="attributes in places.attributes">
{{attributes.name}}
</div>
</div>
For every attribute a different icon should be displayed.
In this example, I've used FontAwesome icons and added a class based on the value of an object attribute.
<div ng-repeat='row in data'>
<i class='fa fa-{{row.icon}}'></i>
</div>
This will generate a div having the icon specified in the row.icon attribute. For the mapping between names and icons you can consult the FontAwesome site.
In need a directive that does an instantaneous show (without
fade in), and when it gets hidden (ng-show='false'), does a progressive
fade out.
here is my attempt :
http://plnkr.co/edit/bEzAlwjNOsxLodnawu3s?p=preview
<span ng-show="inProgress" class="animate-fade">
<i class="glyphicon glyphicon-ok"></i>
<span ng-if="inProgress">save in progress...</span>
<span ng-if="! inProgress">saved</span>
</span>
You can create a new animation class and define .new-anim to appear, and .new-anim-remove.new-anim-remove-active class selector to animate, although this would require you to use the $animate service.
Is there a way to use an ng-if directive without adding a containing element? I'm playing around with dynamic menu items placed by the current view controller and want to handle a dropdown type and non dropdown type, however the ng-if has to be in some kind of element which breaks the bootstrap css.
Here's an example of what I'm trying to do:
<li ng-repeat="item in dynNavList">
<div ng-if="item.dd" ><!--There will be more stuff in here-->
Dropdown test {{item.title}}
</div>
<span ng-if="!item.dd">
NoDropDown {{item.title}}
</span>
</li>
Any nav item created in that html above doesn't style correctly in the navbar because it's inside a div or span element so the css doesn't apply.
I do not want to modify the bootstrap css to get this working and I'm trying to avoid writing any custom directives if possible.
Any suggestions?
ng-if directly on the anchor is fine, demo.