I want to display a list of records. The data is a list of objects, each object is like this:
{
date: "01/01/2001",
time: "04:28 AM",
message: "message strings here."
}
I want to display them in the way that grouped by date. Like this:
08/01/2005
04:28 AM message strings here.
04:20 AM message strings here.
02:12 AM message strings here.
07/05/2005
03:32 PM message strings here.
02:12 PM message strings here.
This is my code:
<div>{{date}}</div> <!--date is initialized in my angular controller to be the first date in the records.-->
<div ng-repeat="record in records">
<div ng-if="record.date != date" ng-model="date">{{record.date}}</div> <!--here I expect date would be updated to record.date.-->
<div>{{record.time}} {{record.message}}</div>
</div>
But I get result like this:
08/01/2005
04:28 AM message strings here.
04:20 AM message strings here.
02:12 AM message strings here.
07/05/2005
03:32 PM message strings here.
07/05/2005 //This is displayed, means the date is not updated when it reach the first 07/05/2005 above.
02:12 PM message strings here.
I searched online, a lot of model data binding is to bind model with <input>. But I don't want input tag. And the ng-model in <div> seems doesn't update the model to the text displayed in the <div>. I wonder what's the proper way to achieve this.
I setup an example based on your data on how to do that: https://jsfiddle.net/63o96cf2/
Original answer: https://stackoverflow.com/a/14800865/3298029
View:
<div ng-app ng-controller="Main">
<ul ng-repeat="group in recordsToFilter() | filter:filterRecords">
<b>{{group.date}}</b>
<li ng-repeat="record in records | filter:{date: group.date}">{{record.time}}: {{record.message}}</li>
</ul>
</div>
Controller:
function Main($scope) {
$scope.records = [{
date: "01/01/2001",
time: "03:28 AM",
message: "message strings here."
}, {
date: "01/01/2001",
time: "04:28 AM",
message: "message strings here."
}, {
date: "01/01/2001",
time: "06:28 AM",
message: "message strings here."
}, {
date: "01/01/2002",
time: "04:28 AM",
message: "message strings here."
}, {
date: "01/01/2002",
time: "05:28 AM",
message: "message strings here."
}];
var indexedRecords = [];
$scope.recordsToFilter = function() {
indexedRecords = [];
return $scope.records;
}
$scope.filterRecords = function(record) {
var recordIsNew = indexedRecords.indexOf(record.date) == -1;
if (recordIsNew) {
indexedRecords.push(record.date);
}
return recordIsNew;
}
}
You need to use "groupBy" filter in https://github.com/a8m/angular-filter#groupby
HTML
<ul ng-repeat="record in records | groupBy:'date'">
{{ record.date }}
<li ng-repeat="player in value">
{{ record.time }} ...
</li>
</ul>
Related
In my project the data is coming to front-end as a json object as shown below:
{
id: 1,
meetingName: "Meeting 1",
meetingDate: "2018-02-21",
startTime: "10:00:00"
}
<td>{{meeting.startTime|date:"h:mma"}}</td>
I used the above method to format the date in angularjs code as 10:00 AM.
But the start time is still shown as 10:00:00. Why is it not formatting the date according to the format?
date filter expects a date object as input. But you are passing a string. Below is a sample code that show the date as expected.
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
let info = {
id: 1,
meetingName: "Meeting 1",
meetingDate: "2018-02-21",
startTime: "10:00:00"
}
$scope.meetingDate= new Date(info.meetingDate + " " + info.startTime);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="datCtrl">
<p>Meeting Time= {{ meetingDate | date:"h:mma" }}</p>
</div>
</body>
Date Filter Docs
Hope this helps :)
Filter date expects an object of type date. This custom filter could help you:
View
<div ng-controller="MyCtrl">
{{data.startTime|timeFilter: data.meetingDate: 'h:mma'}}
{{data.startTime|timeFilter: data.meetingDate: 'yyyy-MM-dd HH:mm:ss Z'}}
</div>
AngularJS application
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.data = {
id: 1,
meetingName: "Meeting 1",
meetingDate: "2018-02-21",
startTime: "10:00:00"
};
});
myApp.filter('timeFilter', function ($filter) {
return function (data, aDate, dateFilter) {
return $filter('date')(new Date(aDate + " " + data), dateFilter);
}
})
> Demo fiddle
Using Vue.JS 1.0, I couldn't find a simple way to properly format a JSON date that can be empty.
I tried with vue-filter npm package date filter but it fails if the date is empty. For example if my data is:
{ name: "John", birthday: null }, /* unknown birthday */
{ name: "Maria", birthday: "2012-04-23T18:25:43.511Z" },
returns
John 12/31/1969 9:00:00 PM <-- null date should be blank
Maria 4/23/2012 3:25:43 PM <-- ok
The code i am using:
<!DOCTYPE html><html>
<head>
<script src="lib/vue/dist/vue.min.js"></script>
<script src="lib/vue-filter/dist/vue-filter.min.js"></script>
</head>
<body>
<div id="app">
<h1>Without Filter:</h1>
<div v-for="person in list">
<div>{{person.name}} {{person.birthday}}</div>
</div>
<h1>With Filter:</h1>
<div v-for="person in list">
<div>{{person.name}} {{person.birthday | date }}</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
list: [
{ name: "John", birthday: null },
{ name: "Maria", birthday: "2012-04-23T18:25:43.511Z" },
]
}
});
</script>
</body>
</html>
What is the proper way to format a date, that will also make show blank if date is null?
Write a custom filter to wrap the date filter. If the input is null, return null, otherwise return Vue.filter('date')(input)
Vue.filter('dateOrNull', function(d, ...others) {
return d ? Vue.filter('date')(d, ...others) : null;
});
new Vue({
el: "#app",
data: {
list: [{
name: "John",
birthday: null
}, {
name: "Maria",
birthday: "2012-04-23T18:25:43.511Z"
}, ]
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="//rawgit.com/wy-ei/vue-filter/master/dist/vue-filter.min.js"></script>
<div id="app">
<h1>Without Filter:</h1>
<div v-for="person in list">
<div>{{person.name}} {{person.birthday}}</div>
</div>
<h1>With Filter:</h1>
<div v-for="person in list">
<div>{{person.name}} {{person.birthday | dateOrNull '%B'}}</div>
</div>
</div>
It doesn't work well:
Roy answers exactly what I asked. But it turned out that vue-filter was not good for my needs. I needed '%c' to show date in browser's locale format (bad idea). vue-filter source was actually doing the following: (rewrited as a stand alone filter, to avoid the dependency):
Vue.filter('date', function (d) {
var date = new Date(d);
return d ? date.toLocaleDateString() + ' ' + date.toLocaleTimeString().trim() : null;
});
It is terrible: each browser works differently. And dates with unknown timezone are assumed UTC and moved to local timezone causing this when living at GMT-3:
New plan:
Use Moment.js with a custom filter:
Vue.filter('moment', function (date) {
var d = moment(date);
if (!d.isValid(date)) return null;
return d.format.apply(d, [].slice.call(arguments, 1));
});
Don't forget <script src='moment.js'>.
Usage: {{ date | moment "dddd, MMMM Do YYYY" }}
See also: Moment Date and Time Format Strings
I also tried vue-moment npm package BUT it depends on CommonJS / require() syntax, and I don't want to use webpack/browserify just for this,
I have a input (top right) where users can search things, when it's directive length get 3 characters it will display a list of products and highlight the matches...
Look at my code:
html
<div id="app">
<div id="header">
<div class="right"><input type="text" v-model="message" v-on:keyup="searchStart()" v-on:blur="searchLeave()"/>
<ul v-if="this.searchInput" class="product-list">
<li v-for="product in products">
{{ product.id }} - {{ product.name | highlight }} - {{ product.qtd }}</li></ul>
</div>
</div>
<div id="main">
<div id="menu">fdfds</div>
<div id="container">{{ message }}</div>
</div>
</div>
js
var search = new Vue({
el: "#app",
data: {
message: "",
searchInput: false,
products: [
{
id: 1,
name: "produto 01",
qtd: 20
},
{
id: 2,
name: "produto 02",
qtd: 40
},
{
id: 3,
name: "produto 03",
qtd: 30
},
]
},
methods: {
searchStart: function(){
if(this.message.length >= 3)
this.searchInput = true;
console.log(this.searchInput);
},
searchLeave: function(){
this.searchInput = false;
this.message = "";
console.log(this.searchInput);
}
},
filters: {
highlight: function(value){
return value.replace(search.message, '<span class=\'highlight\'>' + search.message + '</span>');
}
}
});
Here you can see a live pen: http://codepen.io/caiokawasaki/pen/dXaPyj
try to type prod inside the pen...
Is my filter correct? The way I created the filter is correct?
The main question is: How to output the HTML from my filter?
Edit/Solution
The problem in the case was codepen, there is some kind of conflict with vue, so I was not able to escape the html using {{{}}}, put the code in another editor (jsfidle) and it worked.
I'm accepting the answer given to the reward because it's right.
You'll need 3 steps here for achieve what you want:
Use triple braces {{{ }}} to display unescaped html
Filter your users by your v-model variable, in order to just show the matches
Replace the substring matching by the <span> tag
Check out the computed property filteredUsers and the filter in this working jsfiddle
I'm having a JSON Collection, I wish to dispay Email ID which is marked as IsPreffered = TRUE using AngularJS HTML without .
user.Name
My JSON Collection :
{ "user" : [
{
"Name" : "B. Balamanigandan",
"Email": [
{
"Id": "bala#gmail.com",
"IsPreffered": true
},
{
"Id": "mani#gmail.com",
"IsPreffered": false
}
]}
]};
HTML Source Code:
<div>
<h3>Employee Details:</h3>
<span> {{collection.user.Name}} </span>
<span> {{collection.user.Email.Id}} </span>
</div>
The Collection user contains only one document. So, I didn't use ng-repeat. user is a Collection not a Document. One more check I need. If more than one email has `IsPreferred == true', then I have the take the last one. Kindly assist me.
Kindly filter the condition using HTML Level not in JavaScript Level. Kindly assist me.
instead of this:
<div>
<h3>Employee Details:</h3>
<span> {{collection.user.Name}} </span>
<span> {{collection.user.Email.Id}} </span>
</div>
you will have to do this:
<div>
<h3>Employee Details:</h3>
<span> {{collection.user[0].Name}} </span>
<span ng-repeat="email in collection.user[0].email| filter: {IsPreffered : 'true'}"> {{email.Id}} </span>
</div>
You have to use array syntax, because although there is only 1 user object, it is structured in the json as an array ( note the [ ] , same for Email).
Here is a fiddle: http://jsfiddle.net/Lvc0u55v/5593/
UPDATE: For showing only the last email which is true, use ng-if:
<span ng-repeat="email in collection.user[0].Email| filter: {IsPreffered : true} " ng-if="$last"> {{email.Id}}</span>
Here is the updated fiddle:
http://jsfiddle.net/Lvc0u55v/5594/
One way to do this is to use ngRepeat on the user Emails array with a filter to get only those Emails where "IsPreffered": true. The filter compares each object in the Emails array with the filter object (filterEmail). This filter object is defined in the controller - this way you will be able to change by demand or even set it dynamically.
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.collection = {
"user": {
"Name": "B. Balamanigandan",
"Email": [{
"Id": "bala#gmail.com",
"IsPreffered": true
}, {
"Id": "mani#gmail.com",
"IsPreffered": false
}]
}
};
$scope.filterEmail = {
"IsPreffered": true
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<div>
<h3>Employee Details:</h3>
<span> {{collection.user.Name}} </span>
<span ng-repeat="email in collection.user.Email | filter : filterEmail ">
{{email.Id}}
</span>
</div>
</body>
NOTE: To my understanding it doesn't make much sense to have user as an array inside an object (in my example I removed the inner array). If you insist on keeping this data-schema, you will need to change every reference of collection.user to collection.user[0].
I'm trying to something like
<ion-item class="item-icon-right " ng-repeat="project in jsonObj.Projects | filter:projectArea:true:ProjectStatus" type="item-text-wrap" ui-sref="tabs.detail({project:project['Project name']})">
<div class="row">
<div class="col col-45">
<h2>{{project["Project name"]}}</h2>
<h4>{{project["PM"]}}</h4>
</div>
<div class="col col-45"></div>
<div class="col col-10">
<span class="badge badge-assertive icon-badge"><i class="ion-ios-arrow-right"></i></span>
</div>
</div>
</ion-item>
Controller:
angular.module('App')
.controller('ProjectsController', function ($scope, $rootScope, $stateParams, $state) {
$scope.projectArea = $stateParams.area;
$scope.ProjectStatus = $stateParams.Project_Status;
});
Data:
{PM: "Oommen", Area: "Foods", Project name: "PLuM", Reviewer: "Alex", A&D Start Date: "7-Dec-15"…}$$hashKey: "object:31"A&D End Date: "15-Jan-16"A&D Start Date: "7-Dec-15"Area: "Foods"Build End Date: "TBD"Build Start Date: "TBD"Implementation date: "TBD"PM: "Oommen"Project Status: "Green"Project name: "PLuM"Reviewer: "Alex"SIT End Date: "TBD"SIT Start Date: "TBD"ST End Date: "TBD"ST Start Date: "TBD"Status: "HLD Phase Kickoff. Review to be planned early"}
I'm trying filter ng-repeat with Area and Project Status values. However it filters only based on Area. Could you someone help to identify the problem?
You can chain filters:
project in jsonObj.Projects | filter:projectArea:true | filter:ProjectStatus
Two options:
Use multiple filters where one filter uses the result of the previous filter (chaining)
ng-repeat="project in projects | myFirstFilter | mySecondFilter"
Pass on the data or object you want to add to the equation to the filter.
ng-repeat="project in projects | myFirstFilter:myData"
I'd go with the first option because it creates a clear separation of what each filter does. Makes it easier to test as well.