I wanted to divide my data in four columns to be able to show a grid of images linking to each mission. The code below worked perfectly before trying to order it by the mission type.
As the MissionID don't correspond anymore with the actual order, the mission order is all over the place.
Of course putting "|order by -mission" everywhere doesn't work because of the divided ng-repeat.
Do you have any idea how to proceed ?
<div ng-repeat="missionType in SAM.missions | unique: 'missionType'" class="borderbetweenmissionStyle">
TITLE / {{missionType.missionType}}
<div class="row">
<div class="col s3">
<div ng-repeat=" patch in SAM.missions " ng-if="missionType.missionType == patch.missionType && patch.MissionID % 4 ==1" >
<a ng-href="#/missions/{{patch.MissionID}}">
<figure>
<img class="circle responsive-img z-depth-1 " id="imgMissions" ng-src="IMG/Missions/Mission_Logo/{{patch.MissionID}}/{{patch.Mission_Logo}} ">
<p style="text-align: center;"> {{patch.Mission}} </p>
</figure>
</a>
</div>
</div>
<div class="col s3">
<div ng-repeat=" patch in SAM.missions" ng-if="missionType.missionType == patch.missionType && patch.MissionID % 4 ==2" >
<a ng-href="#/missions/{{patch.MissionID}}">
<figure>
<img class="circle responsive-img z-depth-1 " id="imgMissions" ng-src="IMG/Missions/Mission_Logo/{{patch.MissionID}}/{{patch.Mission_Logo}} ">
<p style="text-align: center;"> {{patch.Mission}} </p>
</figure>
</a>
</div>
</div>
Edit : Example of one mission Type :
For now it displays :
and I would like this:
Related
I create add-to-cart app. I need each col in a row to display like it's mentioned col-lg-4 col-md-2 col-sm-6. But it's displayed in a column (Maybe it doesn't work because I added ng-repeat? And this style is the same for every item?
<h2 class="title">{{title}} <i class="em em-shopping_bags"></i></h2>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-2 col-sm-6">
<div class="card" style="width: 18rem;" ng-repeat='item in itemsArray'>
<img class="card-img-top" ng-src={{item.img}} alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">{{item.name}}</p>
<p class="price">{{ item.price | currency }}</p>
<i class="em em-shopping_trolley"></i> Add to cart <span class="number">{{ item.quantity }}</span>
</div>
</div>
</div>
</div>
</div>
I have a list of JSON data that I need to be able to filter by typing a name in. The results should then only display those listings which have that name in the result. It is currently just hiding the other names, and still showing all of the other listings.
How can I set the filter so that when you type in an actors name, it only shows the movie listings that actor is listed in?
This is the markup used to display the listings, as well as the Angular filter code:
<div class="row" ng-repeat="movies in results | filter:genre">
<div class="col-lg-12">
<div class="well well-sm">
<div class="row">
<div class="col-xs-3 col-md-3 text-center">
<img src="" alt="poster"
class="img-rounded img-responsive" />
</div>
<div class="col-xs-9 col-md-9 section-box">
<h2>
{{movies.Name}}
</h2>
<div class="row rating-desc">
<div class="col-md-12">
<span class="glyphicon glyphicon-time"></span>{{movies.Duration}}<span class="separator">|</span>
<span class="glyphicon glyphicon-signal"></span>{{movies.Rank}}<span class="separator">|</span>
<a class="bookMovie" href="http://www.fandango.com/{{movies.Name}}">Book Now!</a>
</div>
</div>
<hr>
<p>
{{movies.Description}}
</p>
<p ng-repeat="actor in movies.Actors | filter:actor" >
<span ng-bind="actor"></span>
</p>
<hr />
</div>
</div>
</div>
</div>
</div>
The JSON and rest of the code can be seen in this plunker:
https://plnkr.co/edit/ZmxaSRg9ir0qlNNtOyCd?p=preview
You can filter by object like this filter:{ Genres: genre, Actors: actor }
<div class="row" ng-repeat="movies in results | filter:{ Genres: genre, Actors: actor }">
plnkr link
Thats because you should put the actor filter in your parent ng-repeat, check below plnkr:
https://plnkr.co/edit/k1JVXL0Cpxysjhn2tNx7?p=preview
<div class="row" ng-repeat="movies in results | filter:actor | filter:genre">
Here i want to make a page numbering that increments everytime the ng-repeat increments but what i get is that the second ng-repeat index is always zero but using the index of the first ng-repeat works fine through $parent.$index how can this be solved?
here is the code sample :
<div ng-repeat="chapter in plan.chapters" class="export-page" >
<div ng-repeat="section in chapter.sections track by section.id" class="export-page" ng-init="sectionindex = $index">
<div class="header">
<br>
<h2 class="headerTitle">
<b>{{$root.selectedCompany.name + ' | ' + chapter.subject}}</b>
</h2>
</div>
<div class="content">
<h1><b>{{chapter.subject}}</b></h1>
<h2 class="chapter" >{{section.subject}}</h2>
<br>
<p ng-if="section.content_type === 'text'">
<div ng-bind-html="section.content.text"></div>
</p>
<p ng-if="section.content_type === 'table'">
<numeric-table model="section.content"
disable-editing="true"
hide-input-controls="true">
</numeric-table>
</p>
<p ng-if="section.content_type === 'aggregated-table'">
<aggregated-table model="section.selectedTables">
</aggregated-table>
</p>
<p ng-if="section.content_type === 'text-table'">
<free-text-table model="section.content"
disable-editing="true"
hide-input-controls="true">
</free-text-table>
</p>
<p ng-if="section.content_type === 'chart'">
<multi-chart model="section.content"
tables="section.selectedTables"
>
</numeric-table>
</p>
</div>
<div class="footer col-xs-12">
<div class="txt col-xs-11">copyright 2016# {{$root.selectedCompany.name}}</div>
<div class="pp col-xs-1 ">Page{{sectionindex}} </div>
</div>
</div>
</div>
<div ng-repeat="(index1 ,chapter) in plan.chapters" class="export-page" >
<div ng-repeat="(index2,section) in chapter.sections track by section.id" class="export-page" ng-init="sectionindex = $index">
Outer Repeat Index{{index1}}
Inner Repeat Index{{index2}}
</div>
</div>
I have a page to display my friends list for our web application. My problem is that I cant restrict the number of friends shown in one row. I have to display 3 friends in each row:
<div class="row" style="padding-left:200px;">
<div ng-repeat="favourite in favouriteData.data.result">
<div class="col-sm-4 col-md-3 col-lg-2">
<div class="fav_image" >
<img ng-src='/assets/images/profilePics/{{favourite.username +"/"+favourite.profilePic}}' style="height:100px;width:100px;"/>
<h4 class="aju_fav">{{favourite.username}}</h4>
<h4 class="aju_fav">{{favourite.city}}</h4>
<h4 class="aju_fav">Un-Favourite</h4>
<div class=" pull-left user_btm_right"> <i class="fa fa-comments"></i> </div>
</div>
</div>
</div>
plz help to resolve the issue
If you want to always display 3 columns per row (independently from the screen width) you can simply use col-xs-4 (enclosing in a <div class="row"> containing ng-repeat):
<div class="row" ng-repeat="favourite in favouriteData.data.result" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="fav_image">
<img ng-src='http://192.168.1.75/zentiera/assets/images/profilePics/{{favourite.username +"/"+favourite.profilePic}}' style="height:100px;width:100px;"/>
<h4 class="aju_fav">{{favourite.username}}</h4>
<h4 class="aju_fav">{{favourite.city}}</h4>
<h4 class="aju_fav">Un-Favourite</h4>
<div class=" pull-left user_btm_right"> <i class="fa fa-comments"></i> </div>
</div>
</div>
The best way is to use 'limitTo' filter component in ng. Here is documentation
<div ng-repeat="favourite in favouriteData.data.result | limitTo:3">
I would like to use Angular data-binding to dynamically change the date used for Livestamp.
For instance, I would like to make the following dynamic:
<span data-livestamp="1413704094"></span>
by using Angular databinding, something like:
<span data-livestamp="{{item.Date.toISOString}}"></span>
How do I do it? The above code doesn't work.
EDIT:
Here's how it's used:
<div class="panel panel-default messageItems" ng-repeat="item in vm.itemsTop | orderBy:'Id':true" ng-animate="'animate'">
<div class="panel-body">
<div class="media">
<a class="pull-left" href="/People/{{item.User.Username}}">
<img class="media-object"
src="http://mysite/{{item.User.Username}})/avatar"
alt="{{item.User.Username}}" />
</a>
<div class="media-body">
<h4 class="media-heading">
<span ng-bind="item.User.Username"></span>
</h4>
<h6>
posted <span data-livestamp="{{item.Posted.toISOString}}"></span> (<span ng-bind="item.Posted.toUTCString()"></span>)
</h6>
<p class="emojstext">
<span ng-bind="item.Text"></span>
</p>
</div>
</div>
</div>