I am using Angular in a web application. I am showing some placed orders by users with following code. And this works just fine:
<div class="orderspresent" ng-cloak="">
<div class="roworders" style="margin-bottom:5px;" ng-controller="allorders" >
<div class="col-md-3" ng-repeat= "o in orders | orderBy:-o.orderID" ng-hide= "o.orderStatus=='done'" ng-hide="hidden" ng-class="{fade: startFade}">
<div class="sm-st clearfix">
<div class="sm-st-info">
<i class="fa fa-square"></i>
<input type="checkbox" ng-true-value="{{o.orderID}}" ng-change="stateChanged({{o.orderID}})" ng-model="status"/>
</div>
<span>{{o.customerName}}</span>
<p>{{o.orderDate | date:'h:mm'}}</p>
<ul>
<li ng-repeat= "details in o.details">
{{details.aantal}} x {{details.productTitle}}
<div ng-if="details.extras">
+{{details.extras}}
</div>
</li>
<p class="totalprice">{{getTotal()}} euro</p>
</div>
</div>
But for each of these orders I want to show the time they got ordered. I tried using {{o.orderDate | date:'h:mm'}} but this doesn't seem to do anything... How can I only show for example: 10:06 or 12:10?
JSON Data
[{"orderID":49,"customerID":61,"orderDate":"2015-05-06 10:03:05","orderDeliveryDate":"2015-05-06 10:30:05"}, ...]
Looks like the string you are passing into date filter is not valid ISO 8601 datetime string so the filter can't handle it. The closest to your orderDate strings applicable format would be something like yyyy-MM-ddTHH:mmZ. So you can either make your strings to look like '2015-05-06T10:03:05' or convert them to Date objects before passing to template: new Date('2015-05-06 10:03:05').
Here is a little demo of the difference: http://plnkr.co/edit/t2nk1qS4SMvGPzeSi3eC?p=preview
Related
I have tried a lot to display date in corrected format on front end from database.
In mysql database the column has it's datatype as date only then what should i do to display it correctly.
Here is the code i tried
<section class="tab-section tab-arrow review-tab-list">
<ul ng-if= "underReviewLoanDetails.length > 0">
<li ng-repeat='underReviewLoanDetails in underReviewLoanDetails | filter:searchText' ng-click="underReviewLoanPage(underReviewLoanDetails)">
<a class="tab review-tab">
<div class="tabuser-img"><img src="{{underReviewLoanDetails.UserImage}}"></div>
<div class="tab-text">
<div class="tab-middletext">
<h2>{{underReviewLoanDetails.UserName}</h2>
<p>{{"Submitted " + underReviewLoanDetails.RequestedDate }}</p>
</div>
<label>{{underReviewLoanDetails.ProjectTitle}}</label>
</div>
</a>
</li>
</ul>
</section>
Here underReviewLoanDetails is a JSON from database
You need to move the "Submitted" out of the interpolation:
"Submitted "{{underReviewLoanDetails.RequestedDate|date:"dd-MM-yyy"}}
If this String is inside the Interpolation the filter tries to filter "Submitted 2018-02-28"
You can try this.
<p>{{"Submitted " + underReviewLoanDetails.RequestedDate | date:"MM/dd/yyyy"}}</p>
I have a nested list to display comments and replies with 3 levels. I'm toggling dates from time-ago to actual on click by showing and hiding one of two date elements. This works well for each level using ng-click="$parent.swapDate=!$parent.swapDate", but fails to affect other levels.
How can I apply the toggle to all levels of the structure, which looks like the following (simplified)?
<ion-content>
<div class="list">
<div class="item" ng-repeat="comment in comments">
<span am-time-ago="comment.date | amUtc | amLocal"
ng-click="$parent.swapDate=!$parent.swapDate"
ng-hide="$parent.swapDate">
</span>
<span ng-click="$parent.swapDate=!$parent.swapDate"
ng-show="$parent.swapDate">
{{comment.date | amDateFormat: 'D MMMM YYYY # h:mma'}}
</span>
<div class="list">
<div class="item" ng-repeat="comment in comments">
<span am-time-ago="comment.date | amUtc | amLocal"
ng-click="$parent.swapDate=!$parent.swapDate"
ng-hide="$parent.swapDate">
</span>
<span ng-click="$parent.swapDate=!$parent.swapDate"
ng-show="$parent.swapDate">
{{comment.date | amDateFormat: 'D MMMM YYYY # h:mma'}}
</span>
</div>
</div>
</div>
</div>
</ion-content>
I'd prefer to not use a global variable or a service for such a simple thing. Thank you.
inside ng-click or ng-hide or other ng-xx,the $parent.var become isolated once you change it;thus other div won't change. try put it in an object e.g. $parent.var_obj={var:xx}
Marks' answer helped send me in the right direction. Actually, I was reading a good article that mentions the 'dot' best practice for scope variables, and I returned to this question to investigate.
Simply replacing
$parent.swapDate
with
comments.swapDate
in all instances resolves the problem.
I am trying to display emails from json file. I want to display in this format:
Today
Message: messagename 7:24AM
from:janan,walker
Message:messageName 4:20AM
from:texas,Vanessa
Yesterday
Message:messageName yesterday 4:55PM
from: Hopkins,Alison
how to display in this format. here is my code:
<div >
<div ng-repeat="email in inboxEmailList()">
<div id="emailDay">{{email.Date}}</div>
<div id="emailRowContent">
<div id="emailType">{{email.type}}: {{email.subject}}</div>
<div id="emailTime">{{email.Time}}</div>
<div id="emailFrom">{{email.from}}</div>
</div>
</div>
</div>
I think the "shortTime" filter is what you are looking for:
<div id="emailDay">{{email.Date | date:'shortTime'}}</div>
And here is a list of all the built in date formatters in angular
I want to order by elements according to date.
<ion-item ng-repeat="item in PortfolioIdeaList | orderBy:'CreatedDate'" style="background-color:rgb(25, 26, 0);" ng-click="ShowIdeaDetails(item.Id)">
<div class="row">
<div class="col col-80">
<p> {{item.Title}}</p>
</div>
<div class="col col-20">
<b> {{item.Status}}</b>
</div>
</div>
<div class="row">
<div class="col col-70">
{{item.CreatedDate}}
</div>
<div class="col col-30">
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
</div>
</ion-item>
I am getting Title,Created Date and Status from webservices in JSON format.
Created Date is coming as String format MM/DD/YYYY HH:MM:SS e.g 6/2/1991 2:33:43 PM or 12/23/2015 11:55:12 AM.
but its not ordering properly.
How to convert string into date and then order it.
With your code, if CreatedDate is a string, your objects will be orderBy alphanumerical order.
If you want to order by date, you can :
Convert this property to Date when you get your objects from the server
new Date(item.CreatedDate)
Create a custom filter who convert values into Date and order it :
.filter("customOrderBy", function () {
return function (input) {
input.sort(function(a,b){
return new Date(a.CreatedDate) > new Date(b.CreatedDate);
});
return input;
}
});
And call it in your template :
ng-repeat="item in PortfolioIdeaList | customOrderBy"
But in all case, you need to convert your strings to YYYY-MM-DD format
Add :false after orderBy works for me
<ion-item ng-repeat="item in PortfolioIdeaList | orderBy:'CreatedDate':false" style="background-color:rgb(25, 26, 0);" ng-click="ShowIdeaDetails(item.Id)">
I've a situation where I want to display an error message on the page when my modal don't have any records to show. This could be on the initial load or after applying some filter criteria on the page.
I'm using ng-if to check the count of records on the result set after applying the filter, that is why when my page initially loads as there is no data in the filtered result rest it is showing up the error message first and then later it is showing the data.
Any insight would be highly appreciated
prod.skulist is my modal.
<ul class="prd-list">
<li ng-repeat=" p in filtered =(prod.skulist | categoryFilter:prod.selectedFormat :prod.selectedRating) | filter :priceRange" id=" {{p.sku}}">
<figure class="prd-img" ng-click="wrapCtrl.showProdDetils(p.sku,prod.catName)">
<div style="background-image: url({{wrapCtrl.imageLocation+p.image}}); background-repeat: no-repeat;"></div>
<figcaption class="prd-nam f8">{{p.title}}</figcaption>
<span class="new-item" ng-show="{{p.isnew}}"><img src="Content/images/new.png" /></span>
<span class="new-item" ng-show="wrapCtrl.compareStreetDate(p.streetdate)"><img src="/Content/images/coming-soon.png" /></span>
</figure>
<div class="prd-price f5">
{{p.currentprice | currency}}<span class="sales" ng-show="{{p.onsale}}">ON SALE</span>
<span class="cart-btn" ng-click="wrapCtrl.addCart($event)"></span>
<div class="inactive-cart-btn" ng-show="wrapCtrl.compareStreetDate(p.streetdate)"></div>
</div>
</li>
</ul>
<div ng-if="(filtered | filter :priceRange).length ==0" class="error-box">
<div class=" wrp"><span class="error-head">I hate when this happens</span></div>
<div class="wrp error-message">
<span class="f9 pad-top">It looks like I don't have exactly what you are looking for.</span>
<span class="f9 pad-bot">try adjusting your filters to see more</span>
</div>
</div>
I ran into a similar situation and found an ugly, though working solution by using the $timeout service. In your case you would have a scope variable, lets call it loadTimeGiven = false and after the $timeout you set it to true. Then simply do
ng-if="(filtered | filter :priceRange).length ==0 && loadTimeGiven"
Alternatively you could set loadTimeGiven based on a service that your modal has access to.