This is my HTML code. What I need to do is this filter.
ng-repeat="p in planes | filter : { 'tipo_planes' : {{tt.id_tipo}} }"
{{tt.id_tipo}} is an expression from another scope than planes. Its equivalent in planes is 'tipo_planes'.
<div class="panel panel-default" ng-repeat="tt in tipoPlanes">
<div class="row collapse" id="collapse{{tt.id_tipo}}" data-parent="#plans">
<div class="col-lg-4 col-lg-offset-2 wow zoomIn plans" ng-repeat="p in planes | filter : {'tipo_planes' : {{tt.id_tipo}} }">
<ul class="pricing-plan list-unstyled selected">
<li class="pricing-title">{{p.nombre}}</li>
<li class="pricing-price"><span ng-if="p.precio_t">{{p.precio_t}}</span></li>
<li class="pricing-charac" ng-if="p.caracteristicas"><span>{{p.caracteristicas}}</span></li>
</ul>
</div>
</div>
</div>
Related
I have this very simple ng-repeat that creates accordions. I removed the in class from it so they are closed. But what I actually want it to open the first and close all the others.
Any idea how can I do this?
<div ng-repeat="ticket in tickets">
<div class="panel-group" id="accordion{{ticket.TICKET_ID}}">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion{{ticket.TICKET_ID}}" href="#collapse{{ticket.TICKET_ID}}">{{ticket.TICKET_ID}} - {{ticket.TITLE}} ({{ticket.TICKET_STATUS_DESCRIPTION}})</a>
</h4>
</div>
<div id="collapse{{ticket.TICKET_ID}}" class="panel-collapse collapse">
<div class="panel-body">
{{ticket.DESCRIPTION}}
<hr>
<span><b>Contacted by: </b> {{ticket.TICKET_TYPE_DESCRIPTION}}</span><br>
<span><b>Category: </b> {{ticket.TICKET_CATEGORY_DESCRIPTION}}</span><br>
<span><b>Related to: </b> {{ticket.TICKET_TAG_DESCRIPTION}}</span>
</div>
<div class="panel-footer">{{ticket.CREATED_BY}} - {{ticket.CREATION_DATE}}</div>
</div>
</div>
</div>
</div>
You could use ng-class to selectively add the collapse class, which stops the first panel collapsing :
<div id="collapse{{ticket.TICKET_ID}}" class="panel-collapse" ng-class="{ 'collapse': $index !== 0 }">
<div class="panel-body">
...
I've knocked up an example here:
https://codepen.io/anon/pen/NzMexQ?editors=1010
I have looked at almost every solution I could find about this but I can't get my code to work. I wan't to put a banner after 3 ng-repeats
<div class="row products-row" ng-init="onInit()">
<div class="col col-34 fashion-product-container" ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div>
</div>
use $index
like
<div id="banner" ng-show="$index == 3"></div>
Now this will show banner div when its the third element of ng-repeat.
Your <div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div> is outside of <div> containing ng-repeat tag. due to that $index is undefined.
Just put it inside the div of ng-repeat and it will work.
Try this:-
<div class="row products-row" ng-init="onInit()">
<div ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="col col-34 fashion-product-container">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-show="$index==3">Banner</div>
</div>
</div>
I have problem with Bootstrap carousel in ng-repeat, because images are not load one by one if carousel changes, but all images are load all at onece. I found similar questions in stackoverflow, but in my case I loading data from database (not use $scope)
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
The issue is that you are repeating all of your images inside an item of the carousel. A carousel item is defined by the "item" class. If you want a single image to displayed at once then repeat the items like so:
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<!-- add the `active` class to the first item with one-time binding (if $index is 0) -->
<div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="product in main.products track by $index">
<div class="row">
<div class="col-xs-3"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
I am trying to do angular ng-repeat with bootstrap panel using below code
<div class="row" ng-repeat="user in users |filter:search| pagination: curPage * pageSize | limitTo: pageSize">
<div class="col-sm-4">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">{{user.firstname}}</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
</div>
It's working fine but its appearance is vertical not side by side. How can I set these panels side by side?
Is there any way to achieve these features?
Thanks in advance.
Use ng-repeat over .col-sm-4 as follows
<div class="row">
<div class="col-sm-4"
data-ng-repeat="user in users |filter:search| pagination: curPage * pageSize | limitTo: pageSize">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">{{user.firstname}}</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Footer</div>
</div>
</div>
Bootstrap row works on 12 grid. But if a row has more than 12 grid it will wrap it new line..
<div ng-repeat="user in users |filter:search| pagination: curPage * pageSize | limitTo: pageSize">
<div class="row" >
<div class="col-sm-4">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">{{user.firstname}}</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
</div>
</div>
You missed the layout . Probably this might help you
I am trying to call an API but I get the Not an array error when I load the page. The data from the JSON isn't showing up.
This is the section of the code that has the issue:
<div class="row" style="margin-top: 20px">
<div class="col-sm-6">
<h4>TESTCASES</h4>
<div ng-repeat="school in schools | filter: {selected: '!true'} track by $index">
<span class="list-group-item" ng-click="school.status =!school.status" style="background-color:rgba(115,158,226,1);">{{school.name}}</span>
<span class="list-group-item" ng-if="school.status" ng-repeat="subSchool in school.sub | filter: {selected: '!true'} track by $index" ng-click="select(subSchool)" tooltip= '{{subSchool.name}}, Run Time: {{subSchool.runTime}}'>{{subSchool.name}}</span>
</div>
</div>
<div class="col-sm-6">
<h4>TEST PLAN</h4>
<div class="list-group list-select">
<span class="list-group-item" ng-repeat="school in selected track by $index" ng-click="deselect(school)">{{school.name}}</i></span>
</div>
</div>
</div>