I have the following:
<li ng-repeat="deposit in currentDeposits">
<img src="#{{ deposit.displayUrl }}" />
<a class="name" href="http://steamcommunity.com/profiles/#{{ deposit.steam_id }}">#{{ deposit.displayName }}</a>
<p class="name">Deposited #{{ deposit.items.length }} skins worth $#{{ deposit.value }}!</p>
<hr />
<li ng-repeat-end>
<div class="new-round">
<p>^ NEW ROUND START ^</p>
</div>
<hr />
</li>
</li>
<li ng-repeat="deposit in lastGameDeposits">
<img src="#{{ deposit.displayUrl }}" />
<a class="name" href="http://steamcommunity.com/profiles/#{{ deposit.steam_id }}">#{{ deposit.displayName }}</a>
<p class="name">Deposited #{{ deposit.items.length }} skins worth $#{{ deposit.value }}!</p>
<hr />
<li ng-repeat-end>
<div class="new-round">
<p>^ NEW ROUND START ^</p>
</div>
<hr />
</li>
</li>
This first ng-repeat data shows fine, however the data inside the second ng-repeat only flashes on screen, then disappears. Occasionally the data will stay however this isn't common.
Is this a know issue?
Related
I am working on a website that uses Zurbs foundation js, sorry but I am not a fan of this framework but I am stuck with it on this.
Question.
I have tried several times to either add in the orbit or on a containing div the class show-for-small-only but when I go to mobile view only the Arrow show, I have to refresh the page to see the orbit-container. I just used a normal orbit, here is a sample.
Is this typical of Orbits or am I missing something?
<div class="columns small-12 medium-10 text-center small-centered show-for-small-only">
<div class="orbit" role="region" aria-label="Test Orbit" data-orbit>
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button> <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
</div>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<div class="icon">
<img src="assets/img/people.png">
<p>
Human-safe<br />
Pet-safe
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/beaker.png">
<p>
Clean without chemicals
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/hearthand.png">
<p>
Leaves no toxic residue
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/earth.png">
<p>
Creates less waste
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/gear.png">
<p>
Anti-bacterial self-cleaning
</p>
</div>
</li>
</ul>
</div>
</div>
I'm using angularjs 1.4.8. I'm trying to hide & show operation in <li>.
My code is given below:
<ul class="bk_crs_rslt">
<li ng-repeat="c in courses">
<h4>
<a href="#" ng-click="show = !show"> {{c.CourseName }}
<img src="image/bk_ad_btn.jpg" />
</a>
</h4>
<p><span style="color:#337ab7;">{{c.CollegeName}}</span><br>{{c.CountryName}}</p>
<p ng-show="show">
<b>Tution Fee</b> : {{c.Fee}}<br>
<b>Level</b> : {{c.LevelName}}<br>
<b>Detail </b> : {{c.Detail}} <br>
<b>Duration </b> : {{c.Duration}}<br>
<b>Subject </b> : {{c.Subjec}}t<br>
<b>IELTS Score </b> : {{c.Score}}<br />
</p>
</li>
</ul>
How can hide & show in <li> tag?
plunker given here
https://plnkr.co/edit/lsIypaBviXNvEi7Pwok4?p=info
its working in plunker but not working my solution?
Try to use show as property
Like this
<ul class="bk_crs_rslt">
<li ng-repeat="c in courses" >
<h4> {{c.CourseName }}<img src="image/bk_ad_btn.jpg" /> </h4>
<p ng-show="c.show"><span style="color:#337ab7;">{{c.CollegeName}}</span>
<br>{{c.CountryName}}</p>
</li>
</ul>
I want to show {{Brand.BrandDetails.Text}} only one time outside the ng-repeat.. how can i do this (repeat also want).
<li ng-repeat="Brand in Brands">
<a href="#">
<img src="~/Images/{{Brand.BrandDetails.Image}}" class="topBrandsBrandContentImage">
<p class="darkGray fontsize13 fontWeightLight">{{Brand.BrandDetails.Presentage}}% {{Brand.BrandDetails.Text}}</p>
</a>
</li>
{{ Brands[0].BrandDetails.Text }}
<li ng-repeat="Brand in Brands">
<a href="#">
<img src="~/Images/{{Brand.BrandDetails.Image}}" class="topBrandsBrandContentImage">
<p class="darkGray fontsize13 fontWeightLight">{{Brand.BrandDetails.Presentage}}% {{Brand.BrandDetails.Text}}</p>
</a>
</li>
<li ng-repeat="Item in Items">
<div ng-switch="($index)==0">
<div ng-switch-when="true">
< Previous
</div>
<div ng-switch-when="false">
{{$index}}
</div>
</div>
</li>
I want to get element count of the Items and want to show "Next >" for last item
Something like this
<li ng-repeat="Item in Items">
<a ng-if="$first" href="#">< Previous</a>
<a ng-if="!$first && !$last" href="#">{{$index}}</a>
<a ng-if="$last" href="#">Next ></a>
</li>
To get the length use Items.length. It becomes more complex if there is a filter. See this SO post
I've a ng repeater and I defined a list item template for an article list page:
<ul class="article_list">
<li ng-repeat="article in articles | filter:search">
<a href="#" title="article title here">
<span class="date">
<span class="month">{{ article.dt_month }}</span>
<span class="day">{{ article.dt_day }}</span>
<span class="year">{{ article.dt_year }}</span>
</span>
<img src="images/news/{{ article.id }}.jpg" alt="{{ article.title }}" class="thumb" />
<div class="summary">
<span class="article_title">{{ article.title }}</span>
<span class="short">{{ article.content }}...</span>
</div>
</a>
</li>
<li ng-show="(articles | filter:search).length==0">No article found</li>
</ul>
When I checked the console I see 404 not found error for the file images/news/{{article.id}}.jpg
How can I prevent this issue?
Thanks
Use ng-src instead of src for image resources. That way the browser will load it when model data is available.