I want to show comments array data in html but it is not showing data properly. What should I do? Data is showing same like in comments array. What am I doing wrong? What should I do?
<ul class="media-list" ng-controller="dishDetailController as menuCtrl">
<li class="media" ng-repeat="dish in menuCtrl.dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
<div class="col-xs-9 col-xs-offset-1">
<p><strong>Customers Comment </strong>
sort by: <input type="text" ng-model="dish.comment">
</p>
<blockquote>
<p>{{dish.comments }}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
</div>
var dishes=[
{
name:' Salad with Eggs',
image:'images/image-2.jpg',
label:'Delicous',
price:'10',
description:' Health salad with eggs and wonder taste with reasonable price !',
comments:[
{
rating:5,
comment:'',
author:'John Doe',
date:Date
}
],
https://i.stack.imgur.com/2e35Y.jpg
you should use ng-repeat to iterate through the array and show relevant data from the array elements:
<blockquote ng-repeat="comment in dishes.comments">
<p>{{comment.comment}}</p>
<p>{{comment.author}}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
EDIT:
Here is a demo
Your ng-repeat should be like this,
<ul class="media-list" ng-controller="dishDetailController">
<li class="media" ng-repeat="dish in dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
<div class="col-xs-9 col-xs-offset-1">
<blockquote>
<p><strong>Customers Comment </strong> sort by:
<input type="text" ng-model="comment">
</p>
<blockquote ng-repeat="eachline in dish.comments | filter:comment">
<p>{{eachline.comment}}</p>
<p>{{eachline.author}}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
</blockquote>
</div>
</li>
</ul>
DEMO
I guess you want something like this.
<blockquote>
<p> {{dish.comments.rating }}</p>
<p> {{dish.comments.comment }}</p>
<p> {{dish.comments.author }}</p>
<p> {{dish.comments.date | date: 'dd/MM/yyyy' }}</p>
</blockquote>
<div class="row row-content" ng-controller="DishDetailController as DishCtrl">
<div class=" col-xs-12 "> <div class="media ">
<div class="media-left media-middle ">
<a href="# ">
<img class="media-object img-thumbnail " ng-src={{dish.image}} alt="Uthappizza ">
</a>
</div>
<div class="media-body ">
<h2 class="media-heading ">{{dish.name}}
<span class="label label-danger ">{{dish.label}}</span>
<span class="badge ">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
<div class="col-xs-9 col-xs-offset-1">
<ul class="list-inline">
<li>
<h2>customer comments </h2>
</li>
<li>Sort by: <input type="text" ng-model="query"></li>
</ul>
<ul class="list-unstyled">
<li ng-repeat="comment in dish.comments | orderBy:query">
<blockquote>
<p> {{comment.rating}} stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}} ,{{comment.date | date:'MMM,dd,yyyy'}}</footer>
</blockquote>
</li>
</ul>
</div>
Related
I am trying to use check boxes in order to filter my results at an html page. Through a django view a pass my data in a list, and then through a loop like this:
</div>
{% for r in rows %}
<div class="res_show">
<div class="btitle">
<p style="text-align:left"><b>{{r.name}}</b></p>
</div>
<div class="baddress">
<p>{{r.address}}</p>
</div>
<div class="reviewstar">
{% if user.is_authenticated %}
<p style="text-align:left"><span class="fa fa-star checked"></span> {{r.stars}} ({{r.r_count}})</p>
{% else %}
<p style="text-align:left"><span class="fa fa-star checked"></span> {{r.stars}} ({{r.r_count}})</p>
{% endif %}
</div>
<div class="b_category">
<p style="text-align: left"> <b>{{r.category}}</b></p>
</div>
<div class="diraddress">
<p style="text-align:left">{{r.duration}}' {{r.distance}} χλμ <b>{{r.open}}</b></p>
</div>
<hr style="border:3px solid #333333">
</div>
i want to use this class for filtering:
<div class="b_category">
<p style="text-align: left"> <b>{{r.category}}</b></p>
</div>
Category has 4 possible values: cafe, bar, nigh_club, reastaurant
I have found the following code but i can't figure out what i should change in order to work in my code:
http://jsfiddle.net/x1av5809/
Category may contain more tha one values seperated by comma, for example
bar or cafe, bar
An example of use would be choosing the bar check box and showing only results that contain category bar. I i choose both bar and cafe check boxes i should show results that contain bar or cafe category
Thanks in advance
You can loop through your checked checkboxes and then using b:contains.. check the element have that checked values or not depending on this hide/show divs .
Demo Code :
$("input[name='filterStatus']").change(function() {
//check if the checkbox checked length is > 0
if ($("input[name='filterStatus']:checked").length > 0) {
$(".res_show").hide() //hide all divs
$("input[name='filterStatus']:checked").each(function() {
var values = $(this).val() //get valeu of checked checkboxess
$(".b_category b:contains(" + values + ")").closest(".res_show").show() //show same
})
} else {
$(".res_show").show()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b_category">
<input type="checkbox" name="filterStatus" value="Cafe" /><label>Cafe</label>
<input type="checkbox" name="filterStatus" value="Restaurant" /><label>Restaurant</label>
<input type="checkbox" name="filterStatus" value="Bar" /><label>Bar</label>
<input type="checkbox" name="filterStatus" value="Night club" /><label>Night club</label>
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>some1</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Cafe</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somethins</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Night club</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>some4</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Bar</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somes</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Cafe</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somes</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Restaurant</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
I am building a page using Ionic and Angular. I'm including the stylesheet at the top as you can see, but when the page loads, the styles are completely messed up, until I refresh the page. I am not sure what I'm doing wrong. Thanks in advance.
<link rel="stylesheet" type="text/css" href="css/event-nba.css">
<div ng-repeat="events in eventsList" class="events-bg">
<a>
<div class="event-box" ng-style="{'background-image':'url({{events.backgroundImage}})'}">
<div class="nba-event-team">
<span><img class="logos logo-margin" src="{{events.logo1}}"></span>
<span><img class="logos" src="{{events.logo2}}"></span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventDate}}</span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventLocation}}</span>
</div>
<div class="nba-event-team">
<img class="network-logo" src="{{events.networkLogo}}"></img>
</div>
<div class="nba-event-team">
<button class="button button-assertive bth-red">
TICKETS
</button>
</div>
</div>
<div class="preview-box">
<span class="preview-text">{{events.eventPreview}}</span>
</div>
<div class="gear-title-box">
<span class="gear-title-text">PICK UP GEAR FOR THE GAME</span>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-jacket">
<div class="item item-body">
<img class="full-image" src="img/nikesweatshirt200.png">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Nike Jacket <br>Elite Sports - Men's $79.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product">
<div class="item item-body">
<img class="full-image" src="img/kobe xi.jpeg">
<p class="shop-product-box-text-margin">
Shoes
</p>
<h3 class="shop-product-box-text-margin">Nike Kobe 11 <br>Elite Low - Men's $199.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-uptime">
<div class="item item-body">
<img class="full-image" src="img/uptimebottle.png">
<p class="shop-product-box-text-margin">
Sport Supplements
</p>
<h3 class="shop-product-box-text-margin">UPTIME Energy <br>Original $4.39</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-nba">
<div class="item item-body">
<img class="full-image" src="img/lavinjersey.jpeg">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Lavine Jersery <br>NBA Black - Men's $99.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
</a>
So I found the answer. This stylesheet was using a few class names from a previous page, and that stylesheet had different css for those classes. The classes weren't being dumped before this page was loading, thus inheriting the other styles.
I Try to getting the text form same div on button click event.
Here is my HTML Markup:
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airlogowidth airsprite airlogo A4">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more-1" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary" style="display: none;">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
I want "flight-no" div html i.e SG-264 on 'btn-book' on Click.
I try as follows, but return 'undefine' -
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-info').parent('div.left-i').html();
alert(flightNo);
});
Note that in the page have many rows with 'flights' class.
Anyone help me?
The issue with your current code is that the .flight-info element is not a direct parent of .btn-book, it's a sibling of one of the parents. This is why the .flight-info selector on closest() returns nothing.
The easiest way to achieve what you require is to use closest() to get the nearest common parent of both elements, in this case .flight-box, then use find() and text() to get the flight number. Try this:
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-box').find('.flight-no').text();
alert(flightNo); // = SG-264 given your example
});
Example fiddle
you need to use .find() with .closest() and div.left-i is children of div.flight-info not parent()
use it like this
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('.flight-box').find('div.left-i .flight-no').html();
alert(flightNo);
});
DEMO
So I am trying to get the height of the div toolLeft to match div height of toolRight and the same with beneLeft and beneRight. Below is my code, but only get the beneLeft height to change to match beneRight. Looked at some examples on where I could be wrong, but not seeing it. On top of that, my function has gotten super bloated. What is the best approach to this?
The code:
<div class="container">
<div class="homeHead col-md-12">
<h2>Welcome to the Navia Banefits participant portal, {{ ppt.Ppt.firstName }}!</h2>
<p>{{ ppt.Ppt.coName }} ({{ ppt.Ppt.coCode }})</p>
<div class="alerts">
<div id="example" ng-app="fpsClientApp">
<div class="demo-section k-header">
<div ng-controller="pptController">
<div kendo-tab-strip k-content-urls="[ null, null]" id="alertTabs">
<!-- tab list -->
<ul>
<li class="k-state-active">special messages</li>
<li>outstanding swipes</li>
<li>recent denials</li>
<li>upcoming dates</li>
<li>account alerts</li>
</ul>
<div class="alertCompany">
<p> {{ ppt.CompanyAlert.value }} </p>
</div>
<div class="alertSwipes">
<p ng-repeat="swipes in ppt.Swipes"><span class="col-md-2">{{swipes.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
<div class="alertDenials">
<p ng-repeat="denials in ppt.Denials"><span class="col-md-2">{{denials.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{denials.descr}}</span></p>
</div>
<div class="alertDates">
<p ng-repeat="dates in ppt.Dates"><span class="col-md-2">{{dates.key|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{dates.value}}</span></p>
</div>
<div class="alertAccounts">
<p ng-repeat="date in ppt.Alerts" ><span class="col-md-2">{{date.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- begin Benefit Tile cards -->
<div class="beneArea">
<div class="beneLeft col-md-3">
<div>
<h2>My Benefit Statements</h2>
</div>
<div>
<p>Click on a benefit tile to access more detailed information.</p>
</div>
</div>
<div class="beneRight col-md-9">
<div class="beneTile col-md-3" data-ng-repeat="Benefits in ppt" style="margin: 4px; margin-left: 20px;">
<div class="beneHead">
<p>{{ ppt.Benefits[0].name }}</p>
</div>
<div class="beneDetails">
<div class="beneText">
<p class="beneDesc">Current Balance</p>
<p class="beneMoney">{{ ppt.Benefits[0].balance }}</p>
<p class="beneDesc">Annual Election</p>
<p class="beneMoney">{{ ppt.Benefits[0].annualAmt }}</p>
</div>
<div class="beneFooter" style="clear: both;">
<p><span>Last day to incur expenses:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastIncurDate|date : 'MM/dd/yyyy' }}</span></p>
<p><span>Last day to submit claims:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p>
</div>
</div>
</div>
</div>
</div>
<!-- end Benefit Tile cards -->
<!-- being Tool Tile cards -->
<div class="toolArea">
<div class="toolLeft col-md-3">
<div>
<h2>My Tools</h2>
</div>
<div>
<p>Click on a tile to access and maintain your account.</p>
</div>
</div>
<div class="toolRight col-md-9">
<div class="tools">
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/submiticon.svg" >
<p>Submit a Claim for Reimbursement</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/commuterOrder">
<img src="ppt/assets/toolIcons/commutericon.svg" >
<p>GoNavia Commuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/accessHsa">
<img src="ppt/assets/toolIcons/hsa.svg" >
<p>Access my HSA</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviconnect.svg" >
<p>Access NaviConnect</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviapp.svg" >
<p>Manage My Navi App</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/formsdocs.svg" >
<p>Forms and Documents</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/navicommuter.svg" >
<p>Access my NaviCommuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/requestnewcard.svg" >
<p>Request a new NaviCard</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/updateprofile.svg" >
<p>Update my Profile</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/onlineenrollment.svg" >
<p>Online Enrollment</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/recurring.svg" >
<p>My Recurring Claims</p>
</a>
</div>
</div>
</div>
</div>
<!-- end Tool Tile cards -->
</div>
<script>
$(document).ready(function () {
$("#alertTabs").kendoTabStrip({
tabPosition: "left",
animation: { open: { effects: "fadeIn" } }
});
});
var leftBeneHeight = $(".beneLeft").height();
var rightBeneHeight = $(".beneRight").height();
if (leftBeneHeight > rightBeneHeight) {
$(".beneRight").height(leftBeneHeight);
} else {
$(".beneLeft").height(leftBeneHeight);
};
var leftToolHeight = $(".toolLeft").height();
var rightToolHeight = $(".toolRight").height();
if (leftToolHeight > rightToolHeight) {
$(".toolRight").height(leftToolHeight);
} else {
$(".toolLeft").height(rightToolHeight);
};
</script>
Sorry couldn't provide a fiddle as this also pull from a private API.
This is how I would do it.
lvar leftToolHeight = $('.toolLeft').height();
var rightToolHeight = $('.toolRight').height();
if (leftToolHeight > rightToolHeight) {
$('.toolRight').height(leftToolHeight);
} else {
$('.toolLeft').height(rightToolHeight);
}
Do the same thing with beneLeft and beneRight. I hope this helps!
I want to repeat items as shown in the image. I have done repeating by using ng-repeat. All contents are repeated but not in a structure that is shown in the image. how to split the contents like this.. ???
<div class="activityCon" ng-repeat="activity in activity1">
<!--image-->
<div class="n-col erpSub"> <a class="link brand erp-display-block fk-uppercase erp-text-center" href="#">
<div class="bg-gradient"> <span class="fa fa-chevron-down"></span> </div>
<p class="title erp-font-15">{{ activity }}<br>
<span></span></p>
</a>
</div>
<!--image-->
<div class="clearfix"></div>
<!--1st content wrap-->
<div class="col-md-6 warpLine1 msg-time-chat" ng-class="$odd ? 'col-md-6' : '' " >
<!--message content - 1 -->
<div class="message-body msg-in" ng-repeat="activityDesc in dailyActivity[$index].activityArray">
<div class="text col-md-11 firstWrap" > <img class="img-thumbnail" src="{{activityDesc.taskImage}}" alt=""> <span class="label label-info">{{activityDesc.taskName}}</span>
<p>{{ activityDesc.taskMessage }}</p>
<p class="chat_message_date">{{activityDesc.taskUser}} <span> {{activityDesc.taskDate}} , {{activityDesc.taskTime}}</span></p>
</div>
</div>
<div class="clearfix"></div>
<!--message content - 1 -->
</div>
<!-- <div class="col-md-6 WarpLine2 msg-time-chatRight">
<div class="message-body msg-in" ng-if="$odd" ng-repeat="activityDesc in dailyActivity[$index].activityArray">
<div class="text col-md-11 firstWrap"> <img class="img-thumbnail" src="{{activityDesc.taskImage}}" alt=""> <span class="label label-info">{{activityDesc.taskName}}</span>
<p>{{ activityDesc.taskMessage }}</p>
<p class="chat_message_date">{{activityDesc.taskUser}} <span> {{activityDesc.taskDate}} , {{activityDesc.taskTime}}</span></p>
</div>
</div>
<div class="clearfix"></div>
</div> -->
<!-- <div class="col-md-6"></div> -->
<div class="clearfix"></div>
</div>
I think Your condition is wrong. You checked like this...
ng-class="$odd ? 'col-md-6' : '' "
Instead u can Change as
ng-class="{'pull-left':($index %2 ==0),'pull-right':($index %2 ==1)}"