i'm using angular-gridster for designing dynamic user dashboard. how can we make gridster widget data content responsive while resizing widget callback, can any one suggest me how to make it responsive.
<div id="gridster" >
<div gridster="gridsterOpts">
<ul>
<li gridster-item="widget" ng-repeat="widget in DashboardControls">
<div class="box">
<div class="box-header">
<h3 style="width: 100%;word-break: break-all; table-layout: fixed;">{{widget.ControlobjectName}}</h3>
<div class="box-header-btns pull-right">
<a title="settings" data-toggle="modal" data-target="#widgetSettingModal" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div class="box-content">
<div>
<img class="img-responsive" ng-src="{{widget.ThumbnailPath}}" />
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
You'll have to create a custom directive that is embedded into the widgets (or multiple custom directives). This custom directive can contain logic that responds to the data and changes the content of the widgets.
Related
Our designer has given me jquery flexslider for showing recently viewed items in our project. I need to construct a slider of recently viewed products in angular js, dynamically based on provided flex slider.In my system, recently viewed items are stored as json object( not array).
First of all flexslider is not working, it means sliding feature is not working inside my angular project. I tried to use angular flex slider module from online and tried to iterate my nested object and construct a slider using my data. It is also not working(picture is not showing). My designer asked me to write down a directive, so overall design will not have any problem or any design modification.
Can any of you can help me regarding this
Jquery flex slider dynamic part inside partial as follows
<<div class="recent_summary clearfix">
<h2>RECENTLY VIEWED</h2>
<div class="nav_carousel">
<div class="carousel mini_thumb_slider">
<ul class="stage_nav">
<li ng-repeat="arrObj in recentItems">
<div ng-repeat="arrItem in arrObj.timestamp track by $index">
<div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">
<div ng-repeat="(prokey,proMd5) in item.add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
<div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Angular flex slider attempt to solve inside partial
<div class="recent_summary clearfix">
<h2>RECENTLY VIEWED</h2>
<div class="nav_carousel">
<div class="carousel mini_thumb_slider">
<ul class="stage_nav">
<li ng-repeat="arrObj in recentItems">
<div ng-repeat="arrItem in arrObj.timestamp track by $index">
<div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">
<flex-slider flex-slide="proMd5 in item.add_to_cart track by $index">
<li>
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</li>
</flex-slider>
<div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
used scripts
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider.js"></script>
<script src="https://rawgit.com/wilsonwc/angular-flexslider/master/angular-flexslider.js"></script>
Use Flexsilder without Angular and try this code:
var slider = $('#slider').data('flexslider');
slider.addSlide(obj, position);
or
$('#slider').flexslider('addSlide', obj[, position]);
Because HTML will be rendering after Flexsilder;
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.
I am trying to implement a Kendo Tab Strip and that applies ui-router to display the contents of the tab. I can get the tab strip to display but not the contents using the ui-view. Anyone have an example of how to make these items work together.
Sample of my html.
<div class="main-template">
<div class="row">
<h3>Welcome to the Dashboard</h3>
<div ng-controller="Navigation">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active" url="#/invoice">Invoice Management</li>
<li url="#/shipment">Shipment Management</li>
</ul>
</div>
<div ui-view></div>
</div>
</div>
</div>
I was not merging everything together as I should. In the li markup I should have used ui-sref instead of url.
<div class="main-template" style="margin-left: 10px;">
<div class="row">
<h3>Welcome to the Dashboard</h3>
<!--<a ui-sref="invoice">Invoice</a>
<div ui-view></div>-->
<div ng-controller="Navigation">
<div kendo-tab-strip="tabs">
<!-- tab list -->
<ul>
<li class="k-state-active" ui-sref="invoice">Invoice Management</li>
<li ui-sref="shipment">Shipment Management</li>
</ul>
</div>
<div ui-view></div>
</div>
</div>
</div>
I using Bootstrap 3 and like to re-ordering the grid column in mobile layout.
Desktop is looks like as screenshot:
where open in mobile phone, the picture is goes to bottom, isn't possible to place the picture to top by re-ordering the grid column when user view in mobile version?
code for the output:
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div>John Smith</div>
<div>Application Engineer</div>
<div>
<dl class="dl-horizontal">
<dt>Reg. Number</dt><dd>M8553</dd>
<dt>Mobile Number</dt><dd>012-5229887</dd>
<dt>Email</dt><dd>john.smith#email.com</dd>
</dl>
</div>
<div class="row">
<div class="col-xs-12 col-lg-2"><img src="QR-code.png" width="78" /></div>
<div class="col-xs-12 col-lg-10">
<div>
<span>
<button type="button" class="btn btn-primary" data-id="10"><span class="fa fa-fw fa-thumbs-o-up"></span> Like</button>
</span>
<a class="btn btn-success btn-alink" role="button" href="mailto:feedback#email.com?subject=Feedback"><span class="fa fa-fw fa-envelope-o"></span> Send us your feedback</a>
</div>
<div><span>0</span> liked, 63 views.</div>
</div>
</div>
</div>
<!-- /.col-lg-9 -->
<div class="col-sm-4 col-lg-3">
<img src="images/john-smith.jpg" alt="john-smith">
</div>
<!-- /.col-lg-3 -->
</div>
<!-- /.row -->
</div>
Take a look at this
Column ordering
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
heres the link http://getbootstrap.com/css/
I am new to bootstrap and AngularJs. I am using bootstrap and Angular Js for my current application. When I use the bootstrap carousel directly inside the index page, the carousel's slide link are working absolutely perfect. But When I load the carousel markup through the partial files using ng-view, the slide links does not work correctly. It only works one time and then just don't work the next time. Where I am going wrong. I am pasting the code below:
<div class="corousal-container">
<div class="col-md-12">
<ul id="tabs" class="ops-tabs">
<li class="col-md-4 ops-list active">
<a href="#" class="ops-block">
<span class="header">Charts</span>
</a>
</li>
<li class="col-md-4 ops-list">
<a href="#" class="ops-block">
<span class="header">Graphs</span>
</a>
</li>
<li class="col-md-4 ops-list">
<a href="#" class="ops-block">
<span class="header">Reports</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div data-ride="carousel" class="carousel slide" id="execView">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#execView" class="active"></li>
<li data-slide-to="1" data-target="#execView" class=""></li>
<li data-slide-to="2" data-target="#execView" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="container" id="pie-chart1">
</div>
</div>
<div class="item">
<div class="container" id="pie-chart2">
</div>
</div>
<div class="item active">
<div class="container" id="pie-chart3">
<div class="carousel-caption">
<canvas class="canvas" id="canvas" style="width: 400px; height: 400px;" width="600" height="600"></canvas>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#execView" class="left carousel-control"><span class="fa fa-angle-left"></span></a>
<a data-slide="next" href="#execView" class="right carousel-control"><span class="fa fa-angle-right"></span></a>
</div>
</div>
If you are using ng-view then you need to create your bootstrap carousel after the html is loaded. You can do this in the onload method.
<div ng-view onload="viewLoaded()"></div>
$scope.viewLoaded=function(){
$('.carousel ').carousel()
}
Use angular Bootstrap directives for this.
http://angular-ui.github.io/bootstrap/