I am currently working on a Chat application and there I want to show the count of new messages.
<div class="people" >
<div ng-repeat="user in allCompanyUsers">
<div class="person" ng-click="activateChat(user); bubble=true" id="chat_{{user.id}}">
<img alt="" />
<span class="name" >{{user.firstName}} {{user.lastName}}
<span ng-if="!bubble" class="noti_bubble">{{count}}</span></span>
<span class="preview"></span>
</div>
</div>
</div>
<div class="chat active-chat">
<div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false">
<div class="bubble" ng-class="c.type">
{{c.message}}
<span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
</div>
</div>
Any kind of help will be appreciated and thanks in advance...
You can just use {{activeConversations.length}} in order to get the length/count as:
<div class="people" >
<div ng-repeat="user in allCompanyUsers">
<div class="person" ng-click="activateChat(user); bubble=true" id="chat_{{user.id}}">
<img alt="" />
<span class="name" >{{user.firstName}} {{user.lastName}}
<span ng-if="!bubble" class="noti_bubble">{{activeConversations.length}}</span></span>
<span class="preview"></span>
</div>
</div>
</div>
<div class="chat active-chat">
<div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false">
<div class="bubble" ng-class="c.type">
{{c.message}}
<span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
</div>
</div>
Related
I want to fetch category wise data in home page's sections but I am unable to do this. Only one category section is working
I made Category model with belongs to Section model
My Indexcontroller code
namespace App\Http\Controllers\Front;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Slider;
use App\Category;
use App\Section;
class IndexController extends Controller
{
public function index(){
$sliders = Slider::where('status',1)->get();
$categories = Category::with('sections')->where('status',1)->get();
//dd($categories);die;
return view('frontend.index')->with(compact('sliders','categories'));
}
}
My Blade file
#extends('layouts.frontLayout.layout')
#section('content')
<div class="slider_block">
<div class="flexslider top_slider">
<ul class="slides">
#foreach($sliders as $slider)
<li class="slide1">
<div class="container">
<div class="flex_caption1">
<p class="slide-heading FromTop">{{ $slider['slider_title'] }}</p><br/>
<p class="sub-line FromRight" style="width: 60%;line-height: 20px;font-size: 16px;">{{ $slider->slider_text }} </p><br>
{{ $slider['button_text'] }}
</div>
<div class="flex_caption2 FromRight" style="background-image: url(/images/sliders/{{ $slider['slider_image'] }});"></div>
</div>
</li>
#endforeach
</ul>
</div>
</div>
</header>
<section class="wrapper">
<section class="promo_box dark wow fadeInDown">
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="promo_content">
<h3>go2tourism</h3>
<p>Lorem ipsum dolor sit amet, cons adipiscing elit. Aenean commodo ligula eget dolor. </p>
</div>
</div>
<div class="col-sm-3">
<div class="pb_action">
<a class="btn btn-lg btn-default" href="#fakelink">
<i class="fa fa-shopping-cart"></i>
Order Now
</a>
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best tours</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Tours")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best stays</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Stays")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best cars</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Cars")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="promo_box reverse wow bounceInUp" data-wow-offset="50">
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-9 col-lg-9">
<div class="promo_content">
<h3>Do you have any questions to us?</h3>
<p>Please contact us without any hesitation </p>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="pb_action">
<a class="btn btn-lg btn-default" href="#">
Contact Us
</a>
</div>
</div>
</div>
</div>
</section>
</section>
#endsection
Only first section's categories are showing but others section categories are not showing
Please help me
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>
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.
I'm having a problem getting an ng-if to work. It works elsewhere within the same file, but not on the disclaimer line
<div id="wallet" class="row">
<div class="details">
<div class="row" ng-repeat="account in accounts">
<h3 ng-if="account.cardName == 'Cash'">Cash</h3>
<div class="metrics">
<div class="balance">
<h5>Current Balance</h5>
<a ng-if="!isImpersonator()" href="{{account.walletUrl}}" target="_blank">
<u ng-if="account.cardName == 'Cash'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
<span ng-if="!account.ABS_BALANCE">$0.00</span>
</u>
<u ng-if="account.cardName == 'Award Points'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | number}}</span>
<span ng-if="!account.ABS_BALANCE">0</span>
</u>
</a>
<a ng-if="isImpersonator()">
<u ng-if="account.cardName == 'Cash'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
<span ng-if="!account.ABS_BALANCE">$0.00</span>
</u>
</a>
</div>
</div>
</div>
</div>
</div>
<p class="disclaimer" ng-if="account.cardName == 'Cash'">Cash may be deposited to your card up to 48 hours.</p>
</div>
I only want the disclaimer line to appear if account.cardName is equal to 'Cash'. Why does the ng-if work above but not on the disclaimer line?
Thanks in advance...
This is because the disclaimer line is out of scope. The account doesn't exist at that point. You will have to move the disclaimer line inside the ng-repeat block, where account exists to make this work.
Your
<p class="disclaimer" ng-if="account.cardName == 'Cash'">Cash may be deposited to your card up to 48 hours.</p>
Is outside the div with the ng-repeat, then it´ll not be accesible. Try this way;
<div id="wallet" class="row">
<div class="details">
<div class="row" ng-repeat="account in accounts">
<h3 ng-if="account.cardName == 'Cash'">Cash</h3>
<div class="metrics">
<div class="balance">
<h5>Current Balance</h5>
<a ng-if="!isImpersonator()" href="{{account.walletUrl}}" target="_blank">
<u ng-if="account.cardName == 'Cash'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
<span ng-if="!account.ABS_BALANCE">$0.00</span>
</u>
<u ng-if="account.cardName == 'Award Points'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | number}}</span>
<span ng-if="!account.ABS_BALANCE">0</span>
</u>
</a>
<a ng-if="isImpersonator()">
<u ng-if="account.cardName == 'Cash'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
<span ng-if="!account.ABS_BALANCE">$0.00</span>
</u>
</a>
</div>
</div>
</div>
<p class="disclaimer" ng-if="account.cardName == 'Cash'">Cash may be deposited to your card up to 48 hours.</p>
</div>
</div>
</div>
The scope issue was the problem, as pointed out above. Here's what we did to fix..
Added a new function:
$scope.accounts = accounts.data;
$scope.hasCashAccount = () =>
$scope.accounts.some(a => a.cardName === 'Cash');
Then changed the to:
[code]
<p class="disclaimer" ng-if="hasCashAccount()">Cash may be deposited to your card up to 48 hours.</p>
[/code]
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>