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>
Related
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>
This is snippet code.
<div class="row col-xs-12">
<a *ngFor="let rec of recipe "href="#" class="list-group-item clearfix">
<div class="float-left">
<h4 class="list-group-item-heading">{{rec.name}}</h4>
<p class="list-group-item-text">{{rec.description}}</p>
</div>
<span class="float-right">
<img [src]="rec.imagePath" alt="{{rec.name}}" class="img-responsive" style="max-height: 50px;">
</span>
</a>
<app-recipe-item></app-recipe-item>
I wonder why float-right don't align image to right side. If i use insetead pull-right it's working.I have read that bootstrap 4 we should float rather than pull.
I deleted list-group-item, list-group-item-heading , list-group-item-text and it worked.
<a href="#" class="clearfix" *ngFor="let recipe of recipes">
<div class="float-left">
<h4>{{ recipe.name }}</h4>
<p>{{ recipe.description }}</p>
I solved this by removing the xs-12 specifier in the col class.
<div class="row">
<div class="col">
<a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes">
<div class="float-left">
<h4 class="list-group-item-heading">{{ recipe.name }}</h4>
<p class="list-group-item-text">{{ recipe.description }}</p>
</div>
<span class="float-right">
<img
[src]="recipe.imagePath"
alt="{{ recipe.name }}"
class="img-responsive"
style="max-height: 50px"
/>
</span>
</a>
<app-recipe-item></app-recipe-item>
</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 am pretty new to Ionic Framework and the entire hybrid platform.
I have developed a very simple application by using too many tutorials over the internet and the application is working perfectly as expected except the home page.
I have an overall page view that has an ion-content and then there are multiple ion-scroll on the page.
The problem is the scrolling doesn't work as the normal native Android/iOS application.
Can anyone help with this?
Attached below is the full code:
<ion-view ng-init="LoadPage()">
<ion-content ng-show="contentloading" scroll="true">
<ion-refresher pulling-text="Pull to refresh" on-refresh="LoadPage()" >
</ion-refresher>
<div class="row-no-padding">
<div class="row row-no-padding row-center" style="padding-left: 5px;">
<div class="col-33 col-center">
<h5 class="latest-news headingStyle" data-fittext data-fittext-max="12px">Latest News</h5>
</div>
<div class="col col-center">
<ion-slide-box does-continue="true" auto-play="true" show-pager="false">
<ion-slide ng-repeat="item in Slides" ng-click="GoToPost({{item.id}})">
<h4 class="{{FontDetails(1)}}" style="margin-left: 5px;word-break: break-all;white-space:nowrap;overflow:hidden; color:#bb1515;font-size:12px;" ng-bind-html="item.title | unsafe"></h4>
</ion-slide>
</ion-slide-box>
</div>
</div>
</div>
<div class="row-no-padding">
<ion-slide-box does-continue="true" auto-play="true" show-pager="false">
<ion-slide ng-repeat="item in Slides" ng-click="GoToPost({{item.id}})">
<div class="row-wrap">
<div class="col" style="background: url({{item.thumbnail_images.medium.url}}) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;background-size: cover;min-height: 200px;height:250px;max-height:300px;z-index: 1;">
</div>
<div style="background:black;position:absolute;opacity: 0.5;filter: alpha(opacity=50);height:auto;bottom:0%;width: 100%;overflow:hidden;z-index:2; vertical-align: top;" class="col">
<h4 class="latest-news-add {{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h4>
</div>
</div>
</ion-slide>
</ion-slide-box>
</div>
<!-- </div>
</div>-->
<div class="row-no-padding">
<div class="row row-no-padding" style="padding: 5px;">
<div class="col col-33 col-center">
<h5 class="latest-news categoryHeading {{FontDetails(1)}}">{{'Gujarat'| translate}}</h5>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px; overflow: auto;white-space: nowrap; overflow-y: scroll; position: relative;">
<div class="col" >
<ion-scroll direction="x" scroll-outside="true" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="item in gujarat">
<img on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()" ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
<div>
<h6 class="{{FontDetails(1, 0)}}" ng-bind-html="item.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
<!--<div class="col">-->
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col col-33 col-center">
<h5 class="latest-news categoryHeading {{FontDetails(1)}}">{{'Politics'| translate}}</h5>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="item in politics">
<img ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<!-- <div class="col col-34" style="text-align: center;margin-bottom: 10px;background-color: firebrick;vertical-align: middle;text-align: center;color:white;font-family: HouseGothicHG23Text-Bold;font-size:1.30em;">
Technology
</div>-->
<div class="col col-center">
<h5 class="latest-news {{FontDetails(1)}} categoryHeading ">{{'Technology'| translate}}</h5>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="item in technology">
<img ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-list>
<div ng-repeat="item in FooterItems" ng-if="(item.MenuOption !== 'Home' || item.MenuOption !== 'Favorite')" style="margin-bottom: 10px;">
<ion-item style="border: 0px!important;" class="item-stable item item-icon-left home-item-footer item-icon-right {{FontDetails(1)}}" ng-click="toggleGroup({{item.group}},'{{item.link}}')" ng-class="{active: isGroupShown({{item.group}})}">
<i class="icon"><img src="img/{{item.link}}.png" style="width:20px;height:20px;"/></i>
{{item.MenuOption| unsafe | translate}}
<i ng-class="isGroupShown({{item.group}}) ? 'ion-chevron-down' : 'ion - chevron - right'" class="icon" style="font-size:1em;"></i>
</ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown({{item.group}})" style="padding-left:1px;padding-top:1px!important">
<!-- <div class="row row-no-padding">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapper"
ng-repeat="categoryitem in item.items">
<img ng-src="{{categoryitem.thumbnail_images.medium.url}}" ng-click="GoToPost({{categoryitem.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(0)}}" ng-bind-html="categoryitem.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>-->
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="categoryitem in item.items">
<img ng-src="{{categoryitem.thumbnail_images.medium.url}}" ng-click="GoToPost({{categoryitem.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(1)}}" ng-bind-html="categoryitem.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>
</ion-item>
</div>
</ion-list>
</div>
</div>
</ion-content>
You need to make sure you're declaring the height and width of each <div> you're scrolling. From the ion-scroll docs:
Basic usage:
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat">
</div>
</ion-scroll>
Note that it's important to set the height of the scroll box as well as the height of the inner content to enable scrolling. This makes it possible to have full control over scrollable areas.