I want to display only three items in my HTML page using angularJS.
My code:
<div class="col-xs-4" ng-repeat="idea in ideas | i in 2">
if(i !== 2){
<div class="tile p-5 m-b-10">
<button target="_blank" ng-click="showIdea(customer.Id,idea.Id)">
<img class="w-100" src="design/img/projects/1.png" alt="">
<small class="t-overflow m-t-10">Medical-Pro Bootstrap </small>
</button>
<div class="clearfix"></div>
</div>
}
</div>
Your code will not work because your if statement will not be evaluated.
You can use the limitTo filter.
<div class="col-xs-4" ng-repeat="idea in ideas | limitTo: 3">
<div class="tile p-5 m-b-10">
<button target="_blank" ng-click="showIdea(customer.Id,idea.Id)">
<img class="w-100" src="design/img/projects/1.png" alt="">
<small class="t-overflow m-t-10">Medical-Pro Bootstrap </small>
</button>
<div class="clearfix"></div>
</div>
Same as the other answer but you can use ng-if directive instead of an if statement this will remove elements from the DOM if the condition isn't true.
<div class="col-xs-4" ng-repeat="idea in ideas | limitTo:3">
<div class="tile p-5 m-b-10" ng-if="$index!==2">
<button target="_blank" ng-click="showIdea(customer.Id,idea.Id)">
<img class="w-100" src="design/img/projects/1.png" alt="">
<small class="t-overflow m-t-10">Medical-Pro Bootstrap </small>
</button>
<div class="clearfix"></div>
</div>
</div>
Related
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 using the Angular-slick directive and I am having a tiny bit of a problem. I am sure that others may have had similar problems, but I hope someone out there can help me figure this out.
So I have a series of angular directives on my page. Each directive has properties that can be set in order to filter data in the other directives. My Angular-slick directive is bound to data that is coming from a Web API call. On the first load, the directive is perfect and it works fine. But once an action from one of the other directives causes the Angular-slick directive to filter its data (which is just another Web API call that returns similar data as the initial load), the entire the slider gets wacky and out of order. All the slides are displayed vertically.
Here is the code from the template:
<div id="slickContainer" ng-show="ctlr.SectionDataAvailable">
<div id="slickSlider">
<div id="currentDateRange">
<span ng-bind="ctlr.ApiResult.CurrentDateRangeHeaderText"></span>
</div>
<div id="previousDateRange">
<span ng-bind="ctlr.ApiResult.PreviousDateRangeHeaderText"></span>
</div>
<div id="slick">
<slick init-onload="false"
data="ctlr.DataLoaded"
arrows="true"
slides-to-show="3"
slides-to-scroll="3"
infinite="false"
dots="false"
responsive="ctlr.SlickResponsive()">
<div ng-repeat="doubledUpResult in ctlr.ApiResult.DoubledUpResults" id="slickConatiner">
<!--Current Item-->
<div id="currentItemContainer">
<div class="creative-item-heading-container"
ng-show="doubledUpResult.CurrentItem.HasACreative">
<span>{{doubledUpResult.CurrentItem.Headline}}</span><br />
<div ng-show="doubledUpResult.CurrentItem.IsFirstOccurrenceVisible">
<span style="color: #dd4f04;">First Occurrence: </span>
<span>{{doubledUpResult.CurrentItem.FirstPropertyName}}</span>
<span>{{doubledUpResult.CurrentItem.FirstCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.CurrentItem.IsLastOccurrenceVisible">
<span style="color: #dd4f04;">Last Occurrence: </span>
<span>{{doubledUpResult.CurrentItem.LastPropertyName}}</span>
<span>{{doubledUpResult.CurrentItem.LastCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.CurrentItem.HasACreative">
<span style="color: #dd4f04;">Total: </span>
<span>
{{doubledUpResult.CurrentItem.ActivityTotalText}}{{doubledUpResult.CurrentItem.ActivityFootnoteIndicator}}
</span>
</div>
<div ng-show="doubledUpResult.CurrentItem.IsAdvertiserVisible">
<span style="color: #dd4f04;">{{doubledUpResult.CurrentItem.EntityTypeDescription}}:</span>
<span>
<a ng-click="ctlr.OnEntityLinkClicked(doubledUpResult.CurrentItem)">
{{doubledUpResult.CurrentItem.EntityName}}
</a>
</span>
<span>{{doubledUpResult.CurrentItem.ExtraAdvertiserNote}}</span>
</div>
</div>
<div class="creative-thumbnail"
ng-show="doubledUpResult.CurrentItem.HasACreative">
<kmi-crv-thumbnail creative-id="doubledUpResult.CurrentItem.CreativeIdStr"
creative-type="doubledUpResult.CurrentItem.CreativeType"
size="ctlr.ThumbnailSize"
storage-provider="ctlr.StorageProvider"
base-path="'/KMI/IntelliDrive/ApplUI'"
style="margin: 0 auto; cursor:pointer;"
ng-click="ctlr.OnCreativeClicked(doubledUpResult.CurrentItem)"
is-delayed="'true'"></kmi-crv-thumbnail>
</div>
<div class="creative-item-button-container"
ng-show="doubledUpResult.CurrentItem.HasACreative">
<a ng-click="ctlr.OnCreativeClicked(doubledUpResult.CurrentItem)"
class="top-creatives-button current-item"
ng-show="doubledUpResult.CurrentItem.IsQuickViewVisible"
ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'QuickView')">Quick View</a>
<a ng-click="ctlr.OnViewInLibraryClicked(doubledUpResult.CurrentItem)"
class="top-creatives-button current-item"
ng-show="doubledUpResult.CurrentItem.CanViewInLibrary"
ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'ViewInLibrary')">View in Library</a>
<a ng-click="ctlr.OnAddToCartClicked(doubledUpResult.CurrentItem)"
class="top-creatives-button current-item"
ng-show="doubledUpResult.CurrentItem.CanAddToShoppingCart"
ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'AddToCart')">Add to Cart</a>
</div>
</div>
<!--Previous Item-->
<div id="previousItemContainer">
<div class="creative-item-heading-container"
ng-show="doubledUpResult.PreviousItem.HasACreative">
<span>{{doubledUpResult.PreviousItem.Headline}}</span><br />
<div ng-show="doubledUpResult.PreviousItem.IsFirstOccurrenceVisible">
<span style="color: #dd4f04;">First Occurrence: </span>
<span>{{doubledUpResult.PreviousItem.FirstPropertyName}}</span>
<span>{{doubledUpResult.PreviousItem.FirstCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.PreviousItem.IsLastOccurrenceVisible">
<span style="color: #dd4f04;">Last Occurrence: </span>
<span>{{doubledUpResult.PreviousItem.LastPropertyName}}</span>
<span>{{doubledUpResult.PreviousItem.LastCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.PreviousItem.HasACreative">
<span style="color: #dd4f04;">Total: </span>
<span>
{{doubledUpResult.PreviousItem.ActivityTotalText}}{{doubledUpResult.PreviousItem.ActivityFootnoteIndicator}}
</span>
</div>
<div ng-show="doubledUpResult.PreviousItem.IsAdvertiserVisible">
<span style="color: #dd4f04;">{{doubledUpResult.PreviousItem.EntityTypeDescription}}:</span>
<span>
<a ng-click="ctlr.OnEntityLinkClicked(doubledUpResult.PreviousItem)">
{{doubledUpResult.PreviousItem.EntityName}}
</a>
</span>
<span>{{doubledUpResult.PreviousItem.ExtraAdvertiserNote}}</span>
</div>
</div>
<div class="creative-thumbnail"
ng-show="doubledUpResult.PreviousItem.HasACreative">
<kmi-crv-thumbnail creative-id="doubledUpResult.PreviousItem.CreativeIdStr"
creative-type="doubledUpResult.PreviousItem.CreativeType"
size="ctlr.ThumbnailSize"
storage-provider="ctlr.StorageProvider"
base-path="'/KMI/IntelliDrive/ApplUI'"
ng-click="ctlr.OnCreativeClicked(doubledUpResult.PreviousItem)"
style="margin: 0 auto; cursor:pointer;"
is-delayed="'true'"></kmi-crv-thumbnail>
</div>
<div class="creative-item-button-container"
ng-show="doubledUpResult.PreviousItem.HasACreative">
<a ng-click="ctlr.OnCreativeClicked(doubledUpResult.PreviousItem)"
class="top-creatives-button previous-item"
ng-show="doubledUpResult.PreviousItem.IsQuickViewVisible"
ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'QuickView')">Quick View</a>
<a ng-click="ctlr.OnViewInLibraryClicked(doubledUpResult.PreviousItem)"
class="top-creatives-button previous-item"
ng-show="doubledUpResult.PreviousItem.CanViewInLibrary"
ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'ViewInLibrary')">View in Library</a>
<a ng-click="ctlr.OnAddToCartClicked(doubledUpResult.PreviousItem)"
class="top-creatives-button previous-item"
ng-show="doubledUpResult.PreviousItem.CanAddToShoppingCart"
ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'AddToCart')">Add to Cart</a>
</div>
</div>
</div>
</slick>
</div>
</div>
</div>
When the action from another directive is fired, all I want to do is make a Web API call, which brings back a new data set that the slider is then rebound to. My problem is I can't figure out how to do the rebinding without breaking the slider.
Thanks.
Here are my html:
<div masonry id="graphicGridDiv">
<div class="masonry-brick" ng-switch on="{{graphic.length}}" ng-repeat="graphic in graphicArray">
<div ng-switch-when="1" class="col-sm-4 gra-mix-graphic ">
<div class="category_1 custom-menu-preview mix" ng-click="singleGraContent(graphic[0].id)">
<p class="video_title" title="title" ng-bind="$parent.graphic[0].name"></p>
<div class="gra-mix-inner">
<img ng-src="{{$parent.graphic[0].src}}" class="img-responsive">
</div>
<div class="caption">
<p class="video_detail" title="digest" ng-bind="$parent.graphic[0].digest"></p>
</div>
<div class="gra-mix-details-t">
<a class="mix-link but" title="delete" ng-click="graDelete($parent.graphic[0].id)">
<i class="fa fa-times"></i>
</a>
<a class="mix-preview but fancybox-button" title="edit" ng-click="graEdit(graphic[0])" >
<i class="fa fa-pencil"></i>
</a>
</div>
</div>
</div>
<div ng-switch-default class="col-sm-4 gra-mix-graphic">
<div class="gra-mix-details-t">
<a class="mix-link" title="delete" ng-click="graDelete(id)">
<i class="fa fa-times"></i>
</a>
<a class="gra-mix-preview fancybox-button" ng-click="graEdit(id)" title="edit**strong text**" data-rel="fancybox-button">
<i class="fa fa-pencil"></i>
</a>
</div>
<div class="category_1 custom-menu-preview" ng-click="multiGraContent(id)">
<div class="gra-mix-inner thumbnail">
<img ng-src="{{graphic[0].src}}" class="img-responsive" style="width: 330px;">
</div>
<div class="multiFirstTitle">
<p class="video_sub_title" title="{{graphic[0].name}}" ng-bind="graphic[0].name"></p>
</div>
<div class="multi" ng-repeat="mutiGra in graphic | arrayLimitFilter:1 ">
<p title="{{mutiGra.name}}" ng-bind="mutiGra.name" class="video_artical_title"></p>
<div class="multiImage" id="multiImageDiv">
<img ng-src="{{mutiGra.src}}" class="multiImage">
</div>
</div>
</div>
</div>
</div>
</div>
Here is the actual error text:
at Object.$watchCollectionAction [as fn] <div class="masonry-brick ng-scope" ng-switch="" on="{{graphic.length}}"
ng-repeat="graphic in graphicArray">
ng-controller is not specified anywhere in your HTML. Assuming your controller is named masonry you need to add ng-controller="masonry" to your outer div.
this is my code..
<div class="container-fluid" id="con2">
<div class="row-fluid" id="row2">
<div ng-repeat="product in productDetails" class="row">
<div id="searchDiv1" class="col-lg-offset-1 col-lg-2 col-md-offset-1 col-md-2 col-sm-offset-2 col-sm-1 col-xs-offset-1 col-xs-2 padding-0" id="div21" >
<div class="Enlarge">
<img style="width:70px; height:70px;" class="center-block enlarge pull-right {{product.classInfo}}" ng-model="productImage" ng-src="{{product.documents.image}}">
<span> <img id="dataImage" ng-src="{{product.documents.image}}"></span>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-6 {{product.classInfo}}" id="div23">
<div id="p2" class="ng-binding "><a href="#" ng-click="openProductSheet(product.id)" >{{product.id}}</a></div>
<div id="p3" class="ng-binding" > {{product.descriptionTranslation}}</div>
</div>
</div>
</div>
The problem is that the same page is getting loading instead of link in new tab]
I saw some of the blogs of stackoverflow but not able to fix the problem.what is the mistake i am doing ?? any help is appreciable.
Thanks
Try changing the link by adding a target attribute:
<a href="#" target="_blank" ng-click="openProductSheet(product.id)" >{{product.id}}</a>
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>