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.
Related
I want to click on below link in a page with several other links like this one.
I have tried cy.get() with a number of alternative ways. I also tried cy.contains('Content 6') but received an error.
<div class="column">
<a href="/admin/contents/109">
<div class="ui segment">
<div class="ui center aligned header">
Content 6
<div class="sub header">Add description to content packages
</div>
</div>
</div>
</a>
</div>
This was my final solution:
cy.get('a[href*="admin/contents"]').contains('Content 6').click()
I found the solution on this page and with help from user called Udo: https://docs.cypress.io/faq/questions/using-cypress-faq.html#How-do-I-get-an-element’s-text-contents
The href code gives more example on how to handle this problem then other examples for same problem.
you have to "get" the correct element to click on. in your case it could be handled like this:
// find the link with href attribute containing "admin/contents" and click it
cy.get('a[href*="admin/contents"]').click()
I use ionic for my mobile app. I have a Directory with a list of employees. It works fine except that the last employee name gets cut or is not visible.
I use collections-repeat inside ion-scroll. Above this I filter directive. The filter directive should not be scrollable.
I tried setting bottom:50px for the last item in the list, it brings up the last item, but writes over the item above it.
Any suggestions on how to fi this would be break
<ion-content scroll="false">
<filters on-query-change="onQueryChange()" class="filter-directive"></filters>
<hr class="hline">
<ion-scroll class="scroll-length">
<div
collection-repeat="contact in contacts track by contact.id"
item-width="100%"
item-height="getHeight(contact)"
ng-show="(contact.fullName || contact.isDivider)>
<div id="company-directory-item-divider"
class="item item-divider fw-semibold dark"
ng-if="contact.isDivider">
{{contact.letter}}
</div>
<div
class="item item-icon-right tn-nav-item"
ng-click="gotoEmployeeInfo(contact)"
ng-if="contact.fullName">
<span ng-bind-html="contact.fullName"></span>
<div class="tn-nav-item-subtitle dark"> {{contact.workShortLocDesc}}</div>
<i class="icon ion-ios-arrow-forward"></i>
</div>
</div>
<ion-scroll>
</ion-content>
Looks like the div with collection repeat should be the first element inside ion-content for this to work:
So this is how I finally fixed it:
Got rid of ion-scoll
made ion-content scrollable
Put the filter directive and hline between ion-header and ion-content and set it to position absolute (along with some margin top styling)
styled ion-content with margin-top to bring it lower (so as not to write over the filter)
This worked.
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".
I want to show images in a carousel and is using ui-bootstrap carousel in my Angular-project. When a image is showing in the carousel I want to update another DIV with text related to the image.
<div ng-controller="carouselCtrl">
<div style="height: 305px; width:205px; align-content: center">
<carousel interval="myInterval">
<slide ng-repeat="player in players" >
<img ng-src="data:image/*;base64,{{player.ProfileImage}}" style="margin:auto;">
</slide>
</carousel>
</div>
</div>
My player object contains information about a player that I want to show in another div under the carousel. How can I do that?
Based on the plnkr referenced in the ui.bootstrap documentation you can specify an active attribute on your slide tag
<slide ng-repeat="player in players" active="player.active">
So you can have another ng-repeat under your carousel under the one you have above, and conditionally show based upon the active attribute. Or use a filter to get just the active one.
I've output the slides json in this plnkr
I am using semantic ui accordion in my template of my angular js project.
<div class="ui accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Content
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
</div>
The problem is both the contents are in open state, without having a necessity to click on the accordion to open. What is the change I need to do?
There are four things you might check:
1) Remove the 'active' class from the last div in your markup since it makes its content visible.
2) You need to initialize the accordion via
$('.ui.accordion').accordion();
See the usage information on the Semantic UI accordion page:
http://semantic-ui.com/modules/accordion.html#/usage
3) You will also need to include the Semantic UI javascript files.
4) Since you said you use the accordion in a template, you have to wrap the initializtion inside a script inside the template or (the angular way) write a short directive which will invoke the accordion initialization on the element for you.