I am trying to order the following by date:
<div class="inbox" ng-repeat="recipient in messages | orderBy: 'recipient':true">
<ul>
<div>
<li class="inboxItem">
<a ng-href="#/messaging/userChat/{{recipient.$id}}"><span> {{recipient.$id}} <br> </span></a>
<div ng-repeat="content in recipient track by $index">
<span ng-show="$last"> {{content.sender}} {{content.message}} <br> {{content.date}} <br></span>
</div>
</li>
</div>
</ul>
My data structure looks like that:
--ID: (recipient in ng-repeat)
-----Date (content in ng-repeat)
--------------Sender
--------------Message
--------------Date
-----Date (content in ng-repeat)
--------------Sender
--------------Message
--------------Date
Etc.
How do I order the list by the Date value? Why isn't my code working?
Thanks a lot!
EDIT:
Date is in form of Date() form AngularJS.
I will be able to add better description of data later, for now I can provide a screenshot of Firebase set up.
Where 1375194092807517 is the USER ID of current user, 1384934715162092 is the USER ID of the one with whom the messages are sent.
Actually I figured it out myself. Since eveytime I send new message, I set LastUpdate to the Date() value, I user the following orderBy:
<div class="inbox" ng-repeat="recipient in messages | orderBy: 'LastUpdate':true">
This way I didn't needed to use orderBy nested ng-repeat :)
Thanks to every one who wanted to help!
Use the build-in filter orderBy, as you did in the parent ng-repeat. The expression you provide could be a function in your scope
Related
I have an object called "profile" that includes a handful of other objects -- each one I want to display the label followed by the display_value:
In my HTML, I know I need to ng-repeat through the object profile, but have not been able to get the desired display of label: display_value (i.e. Employment Start Date: 11/20/2019). What is the correct syntax to loop through c.profile and display label followed by display_value? Do I need two ng-repeats in this instance?
<div ng-repeat="item in c.profile track by $index">
{{item.?}}: {{item.?}}
</div>
<div ng-repeat="item in c.profile track by $index">
{{item.label}}: {{item.display_value}}
</div>
make sure your data is what you expect it to be.
Use ng-repeat="(key, value) in myObj":
<div ng-repeat="(category, valueObj) in c.profile">
<h2>{{category}}</h2>
<div ng-repeat="(key, value) in valueObj">
{{key}} : {{value}}
</div>
</div>
For more information, see
AngularJS ng-repeat Directive API Reference - Iterating over object properties
I am trying to filter based on the value coming from the jason .how to filter more than one value.here is my code.
<div ng-click="mailType('All')">All</div>
<div ng-click="mailType('Messages')"> Messages</div>
<div ng-click="mailType('Referrals')">Referrals</div>
<div ng-repeat="email in inboxEmailList() | filter:{status: 'new'}">
<div>{{email.Date}}</div>
<div>{{email.type}}:{{email.subject}}</div>
<div>{{email.Time}}</div>
<div>{{email.from}}</div>
</div>
here inboxEmaillist is having json data with fileds (date,type,time,from,status[new,deleted,sent],type[Message,Referral]).when I click 'all' it should show both message and referral and when i click message it should show message type .how do I add this filter along with the existing filter(status:new)?
You can chain filters, like so:
<div ng-repeat="email in inboxEmailList() | filter:{status: 'new'} | filter:typeToFilter">
You can also set typeToFilter directly within your ng-click.
<div ng-click="typeToFilter = {}">All</div>
<div ng-click="typeToFilter = {type: 'Messages'}"> Messages</div>
<div ng-click="typeToFilter = {type: 'Referrals'}">Referrals</div>
I'm trying to create some functionality where the user would have an input box and all the data (li's) below are hidden.
Then when a user types into the input box, those li's that match that text are show.
What would the best way to do this using angular? I've set up plunker below:
http://plnkr.co/edit/T6JOBJE4LrAtshbmaoPk?p=preview
I was thinking of setting the li's to:
li {
display: none;
}
and then was going to try an ng-if with the ng-model as the value. Something like this:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Search</span>
<input type="text" class="form-control" ng-model="search">
</div>
<ul>
<li ng-repeat="x in data | filter:search " ng-if="!search">{{x.name}}</li>
</ul>
Can someone help point me in the right direction? Even if its just explaining the logic.
You can just set ng-show attribute to your <ul> tag, where you will watch on length of search variable and if it's greater that zero, your list with filtered results will be shown. So, you don't need any css.
<ul ng-show="search.length">
<li ng-repeat="x in data | filter:search ">{{x.name}}</li>
</ul>
Demo on plunker.
Part of your problem is the filter matches on the empty search string. You could create a custom filter to handle this, something like this http://plnkr.co/edit/i4lsuVUmOLO3pbISu7FR?p=preview
$scope.filterName = function(datum) {
console.log($scope.search, datum);
return $scope.search !== '' && datum.name.indexOf($scope.search) !== -1;
};
Used in the template like:
<ul>
<li ng-repeat="x in data | filter:filterName">{{x.name}}</li>
</ul>
Then you would have greater control over the filter if you want to tweak it in future.
I'm a beginner in AngularJs. I'm trying to filter data, using a dropdown menu, by only one field :
<select ng-model="annee" ng-options="annee.titre for annee in annees track by annee.id">
</select>
<ul>
<li ng-repeat="x in accueils | filter:annee" >
{{x.titre}}
<div ng-bind-html="x.description | to_trusted"></div>
{{x.date}}
{{x.cout}} $
{{x.participants}} participants
</li>
</ul>
In each x, there is a field "annee", i want to filter by this field.
For a working example : http://plnkr.co/edit/MbfrhdKfbTObybsQvxrR?p=preview
Now the problem is, when i select an option in the dropdown, i lose all the data, the filter is not working.
Can you please help me ?
Thanks
Here is plunker
Things are going as in your select you are getting complete object selected:-
for example:-
if you select '2015-2016' you will get {"titre":"2015-2016","id":3} in $scope.annee.
So, in filter you need to search for filter:{annee:annee.id} that means look for the annee inside accueils having anneed.id(this is from model).
<li ng-repeat="x in accueils | filter:{annee:annee.id}" >
{{x.titre}}
<div ng-bind-html="x.description | to_trusted"></div>
{{x.date}}
{{x.cout}} $
{{x.participants}} participants
</li>
I'm an angularjs newbie building my first app. I have a list of users that I can filter and sort:
<button ng-click="order='lastname'; reverse=!reverse">Sort by name</button>
<button ng-click="order='id'; reverse=!reverse">Sort by id</button>
<input type="text" ng-model="filter.user">
<ul class="userlist" ng-class="{blur: currentUser}">
<li ng-repeat="user in users | orderBy:order:reverse | filter:filter.user">
{{user.id}} / {{user.firstname}} {{user.lastname}}
Show details
<div ng-click="showDetails(user)">Show details in overlay</div>
</li>
</ul>
<div ng-show="details">
<div ng-click="details=!details">close</div>
{{user.custom}}
</div>
<div ng-show="currentUser" id="overlay">
{{currentUser.firstname}} {{currentUser.lastname}} {{currentUser.custom}}
<div ng-click="closeOverlay()">close</div>
</div>
I can click on a user to get his details. Now I want to realize the following scenario: When I press the enter key in the filter text input I want to show the details of the first <li /> in the list at the current time. So in jQuery I would bind a keypress event to the input which would check for the key code (13) and then would trigger: $('li').eq(0).click() which would call showDetails() on that particular user - easy.
How can I build such functionality with angular? I tried using the ng-keypress directive which lets me bind a function to a certain keypress but now I'm stuck because I don't know how to trigger the showDetails() function on the first element. Any help greatly appreciated!
This is a workaround you can give a try for the time being: make your ng- keypress handler create a list of your filtered results (that is, reapply your filters on a copy of your user list in your controller) and then call the showDetails for the first egg element of that list.
Is it ugly? Yes. It's it a bad decision if you are working with big lists? Certainly. But it will get you going till you find another way / better stackoverflow answer.
The following should work. Inside your ng-keypress handler set a property that enter was pressed, e.g. enterPressed. Then use ng-init as follows:
<li ng-init="isFirst($first, user)" ng-repeat="user in users | orderBy:order:reverse | filter:filter.user">
{{user.id}} / {{user.firstname}} {{user.lastname}}
Show details
<div ng-click="showDetails(user)">Show details in overlay</div>
</li>
And then in your controller have something like:
$scope.isFirst = function(first, user) {
if (first && enterPressed) {
enterPressed = false;
$scope.showDetails(user);
}
}
I figured out a pretty elegant solution:
In the ng-repeat you can assign an additional variable (I called it filteredUser to the current result set:
<li ng-repeat="user in (filteredUser = (users | orderBy:order:reverse |
filter:filter.user))" ng-click="showDetails(user)">
This way it is super easy to access the first item in that result set (filteredUser[0]) and pass it to a function:
<input type="text" ng-model="filter.user" ng-keypress="$event.keyCode == 13 ?
showDetails(filteredUser[0]) : null">