I am using unique filter to display JSON data.
This is my JSON data:
data= [
{
itemId: "100",
name: "x001",
date: "2016-01-16T16:17:38.928-05:00"
},
{
itemId: "102",
name: "x002",
date: "2016-01-16T16:05:20.928-05:00"
},
{
itemId: "103",
name: "x003",
date: "2016-01-15T10:10:01.715-05:00"
},
{
itemId: "104",
name: "x004",
date: "2016-01-15T12:15:01.715-05:00"
},
{
itemId: "105",
name: "x005",
date: "2016-01-14T12:15:25.928-05:00"
}
]
I am trying to display itemswith no repeated date, so that my output will be:
x001
x003
x005
How do I use unique filter which filters only date value (not consider Time stamp in date field)
here is my HTML code:
<div ng-repeat="item in result | unique:'date'">
{{name}}
</div>
See if this helps: How to make ng-repeat filter out duplicate results
Basically says:
you must include filters as an additional reference in your module angular.module('yourModule', ['ui', 'ui.filters']);
Related
I have an array of objects like this:
$scope.sortableItems =
[
{
name: 'Blue Shirt',
fields: {Price: 20}
},
{
name: 'Pink Shirt',
fields: {Price: 80},
},
{
name: 'Orange Shirt',
fields: {Price: 10},
}
]
I need to make an ng-repeat field that can sort the products based on price from low to high or high to low.
I tried this:
.product(ng-repeat="item in sortableItems | orderBy:fields.Price")
But it had no effect.
Additionally I have another variable $scope.sortFunction which can equal Price: Low-High or Price: High-Low the end result needs to detect the value of $scope.sortFunction and sort based on the value of the string. Not sure how to do that with an ng-repeat
You can create a function that would return price and use that function inside your orderBy
js
$scope.getPrice = function(item){
return item.fields['Price'];
}
html
<div ng-repeat="item in sortableItems | orderBy:getPrice:false">{{item.fields['Price']}}</div>
order by takes a second boolean value that you can use for asc / desc ordering.
Demo
I want to create an expense tracking app but don't know how to make my schema structure.
The layout:
The schema:
module.exports = {
expenseList: [
{
uid: 'some-uid1',
createdAt: 'some-date1',
expenseItems: [
{
date: 'date11',
desc: 'desc11',
amount: 'amount11'
},
{
date: 'date11',
desc: 'desc11',
amount: 'amount11'
}]
},
{
uid: 'some-uid',
createdAt: 'some-date',
expenseItems: [
{
date: 'date1',
desc: 'desc1',
amount: 'amount1'
},
{
date: 'date1',
desc: 'desc1',
amount: 'amount1'
},
{
date: 'date1',
desc: 'desc1',
amount: 'amount1'
}]
}
]
};
How do I change my schema so I can loop through expenses and display createdAt property as a clickable link that redirects to that expense items?
When do I use Arrays and when do I use Objects in my schema?
Where do I need uid (unique ids)?
I will use firebase for this app
You have an expenseList with a date and expenseItems associated with it. You can have a schema roughly like this. expenseList will be an array of objects. Each expenseList is an object containing uid (to uniquely identify the list), createdAt and array of expenseItems with its own set of properties.
expenseList: [{
uid: 'some-uid',
createdAt: 'some-date',
expenseItems: [
{
date: 'date1',
desc: 'desc1',
amount: 'amount1'
},
{
date: 'date1',
desc: 'desc1',
amount: 'amount1'
}
]
}]
You can iterate over this expenseList to display createdAt in your first screen. On clicking of that, depending on the unique id of that expenseList, fetch the expenseList and display the expenseItems on the second screen.
I have not used firebase before, so you might have to tweak the schema a little.
I have some data set up like this:
$scope.data = [
{
weekDay: {
monday: [{
time: ''
}],
tuesday: [{
time: ''
}],
wednesday: [{
time: ''
}],
thursday: [{
time: ''
}],
friday: [{
time: ''
}],
saturday: [{
time: ''
}],
sunday: [{
time: ''
}]
}
}];
If I set up an ng-repeat like this...
<p ng-repeat="day in data.weekDay">{{day}}</p>
All I see is:
{"time":""}
{"time":""}
{"time":""}...
Why can't I see the parent key (individual days of the week)? How would I be able to use the days of the week in my repeater? (e.g. as a title in an h3 tag)
You cannot access weekDay property like data.weekDay as $scope.data is an array. Access it as data[0].weekDay.
<p ng-repeat="(day, timeObj) in data[0].weekDay">
{{day}}
</p>
Otherwise change your data like this (which makes more sense I guess)
$scope.data = {
weekDay: {...}
};
and access it as data.weekDay in ng-repeat
Jsfiddle
In the json the week day is an index, not a value. For example the monday it would be like below:
$scope.data = [
{
weekDay: {
dayname: 'monday',
timevalue : [{
time: ''
}],
... Rest of values ...
}
}];
And the html like below
<p ng-repeat="day in data.weekDay">{{dayname}}</p>
Hello i'm trying to use ng-options to get a grouping of countries by region. It only works by repeating the group name in every row. Is it possible to do it using the following json :
$scope.countries = [
{ region: "americas", countries: [{ value: "usa", key: "1" }, { value: "mexico", key: "2" }] },
{ region: "Africa", countries: [{ value: "3", key: "Algeria" }, { value: "4", key: "Morocco" }, { value: "5", key: "Tunisia" }] },
];
ng-options is pretty locked down in it's definition, so you'll probably need to loop through your countries array and add the region, something like:
$scope.countries_with_regions = [];
$scope.countries.forEach(function(region){
region.countries.forEach(function(country){
country.region = region.region;
$scope.countries_with_regions.push( country );
});
});
then you can do your ng-options with the countries_with_regions
You data structure fo countries needs to be like
countries = [{value : 3, key: "algeria", region : "africa"}, ...]
for the ng-options to be able to "group by" region.
I use kendo ui grid with angular. I want the grid to be updated with every change in the array (of any property). Meaning, if my data is:
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
and the age is changed from 16 to 17 I want the grid to be updated automatically.
I understand that I can use ObservableArray and when updating the observable the grid will be updated but I don't want the entire application to know the observable. I want to be able to update the original rowData and affect the grid. Any suggestions of how I do that?
I thought that adding a template to a row or a specific column with angular binding will help but it didn't, here is an example of it:
function Controller(GridConstants) {
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
this.gridDataSource = new kendo.data.DataSource({
data: new kendo.data.ObservableArray(this.rowData),
schema: {
model: { id: "id" }
}
});
this.gridOptions = {
dataSource: this.gridDataSource,
selectable: "row",
columns: [
{
field: "name",
title: "Name"
},
{
field: "age",
title: "Age",
template: "<label>{{dataItem.age}}</label>"
}
],
selectable: "single"
};
}
You can try ng-bind instead:
template: "<label ng-bind='dataItem.age'></label>"
var rowDataObservable = new kendo.data.ObservableArray(this.rowData);
...
data: rowDataObservable,
...
//and you need work with rowDataObservable, this will work
rowDataObservable[0].age = 17;