Trying to create a filter for Angular.js
Controller.js sample snippet:
function TitleListCtrl($scope) {
$scope.titles = [
{ "name": "Foobar",
"editions":
[{"print": true,
"ebook": false,
"audio": false }]
},
{ "name": "FooBarBar",
"editions":
[{"print": false,
"ebook": false,
"audio": false }]
}
];}
Angular html:
<ul ng-controller="TitleListCtrl">
<li class="TitleList" ng-repeat="title in titles
| filter:isUpcoming
| orderBy:'date'">{{title.name}}</li>
</ul>
Now, I'm trying to return only those titles who have no active editions (no members of the edition array is set to true). Finding it hard to find examples online doing something like this...
$scope.isUpcoming = function(title) {
return title.editions[0] & title.editions[1] & title.editions[2]===false;
};
Instead of the above approach, I used data-ng-show:
<ul ng-controller="TitleListCtrl">
<li class="TitleList" data-ng-show="!(title.upcoming)"
ng-repeat="title in titles
| filter:query
| orderBy:'date'">{{title.name}}</li>
</ul>
And added a new pair "upcoming": true, for titles where needed.
function TitleListCtrl($scope) {
$scope.titles = [
{ "name": "Foobar",
"editions":
[{"print": true,
"ebook": false,
"audio": false }]
},
{ "name": "FooBarBar",
"editions":
[{"print": false,
"ebook": false,
"audio": false }],
"upcoming": true
}
];}
Please have a look at the plunker http://plnkr.co/edit/SkXnZhwic8KHWvj0JyFI?p=preview.
It implements a custom filter which filters out the long list to upcoming list and then renders the upcoming list
Related
I receive JSON(that has products/categories related information) from a Rest API call, on my ReactJS page. I render this information on ag-grid.
Categories are showed horizontally and against each category, products are shown in the columns.
---------|----- |----------|------------
Product1| Product2 | Product3
---------|-------------------------------
Category1|abc1 | abc2 | abc3
-----------------------------------------
Category2|xyz1 | xyz2 | xyz3
-----------------------------------------
The JSON can have any number of categories/products.
I need to able to render the rows/columns dynamically based on this info.
Not sure how to go about this?
Products could be maximum five in number.
Shall I define header definitions of these five products in my reactJS page and then dynamically set the hidden property to true or false, depending upon which product is present in JSON?
[{
headerName: "Product1",
resizable: true,
wrapText: true,
cellStyle: {
'white-space': 'normal'
},
autoHeight: true,
hide: true
},
{
headerName: "Product2",
resizable: true,
wrapText: true,
cellStyle: {
'white-space': 'normal'
},
autoHeight: true,
hide: false
}]
JSON:
Example1:
"raw_message":
[
{
"category": "category1"
[
{
"product": "Product1"
},
{
"product": "Product2"
},
]
}
]
Example2:
"raw_message":
[
{
"category": "category1"
[
{
"product": "Product1"
},
{
"product": "Product2"
},
{
"product": "Product3"
},
]
}
]
Thanks for your help. I managed to resolve the issue by using ag-grid's onRowDataChanged eventhandler and columnAPi's SetColumnVisible property.
I´m fairly new to Angular2, and i want to read out a json file. It´s working, that I get the file from a REST-Client, i can save the file in a local variable in a component. Now I´m trying to read properties (Array) with ngFor, but this isn´t working.
Here´s the html:
<div *ngFor="let categories of tasks.tasks">
{{categories}} --> Display name of categorie (epg, recs)
<p *ngFor="let task of categories">{{task.text}}</p>
</div>
And the JSON-File:
{
"tasks": {
"epg": [{
"text": "\\\\...\\Daten\\Videos\\Aufnahmen"
}, {
"text": "C:\\Users\\...\\Desktop"
}],
"recs": [{
"text": "\\\\...\\Daten\\Videos\\Aufnahmen"
}, {
"text": "C:\\...\\Junias\\Desktop"
}]
}
}
Hope someone can help me ;)
Consider
z={
"tasks": {
"epg": [{
"text": "\\\\...\\Daten\\Videos\\Aufnahmen"
}, {
"text": "C:\\Users\\...\\Desktop"
}],
"recs": [{
"text": "\\\\...\\Daten\\Videos\\Aufnahmen"
}, {
"text": "C:\\...\\Junias\\Desktop"
}]
}
Modify your JSON as
let a=this.z.tasks;
this.z = Object.keys(a).map(function(k) { return a[k] });
Here is a plunker
I have Json request as below. I need to filter only values from key with intrsted in table.I am new to filters and handling key in angular. I attached my JSON request and response, need assistane.
JSON:
var customer =
[
[
{
"businessuserid": 44,
"businessusername": "rk business New",
"businessusermobile": "00",
"businessusercountrycode": "91",
"admin": true,
"mobilevalidated": false,
"emailvalidated": false,
"email": "riteshnew#gmail.com",
"upin": "000044"
}
],
[
{
"approved": true,
"businessuserid": 43,
"businessusername": "Cakey Bakes",
"businessusermobile": "8050663763",
"businessusercountrycode": "91",
"admin": true,
"mobilevalidated": true,
"emailvalidated": false,
"email": "preethi#groupz.com",
"upin": "000043"
}
],
[
{
"intrsted": true,
"attended": false,
"businessuserid": 44,
"businessusername": "rk business New",
"businessusermobile": "00",
"businessusercountrycode": "91",
"admin": true,
"mobilevalidated": false,
"emailvalidated": false,
"email": "riteshnew#gmail.com",
"upin": "000044"
}
],
[
{
"intrsted": true,
"attended": false,
"businessuserid": 52,
"businessusername": "Cars workshop",
"businessusermobile": "9535000636",
"businessusercountrycode": "91",
"admin": true,
"mobilevalidated": true,
"emailvalidated": false,
"email": "preethi#car.com",
"upin": "000052"
}
]
Html:
<table ng-repeat="item in customers | filter: { intrsted: true }">
<td>{{item.businessusername}}</td>
<tr>
</table>
There is nothing wrong with your filter usage. Problem is at your ng-repeat usage. If you double check your json object you will see your every item is another array so you need to use inner object as array. Fix your html like this
<table ng-repeat="item in customers | filter: { intrsted: true }">
<td>{{item[0].businessusername}}</td>
</table>
You see your item is just an another array so use it like item[0] and you will get the result you want...
UPDATE
for showing inner array list on html use second ng-repeat inside of first ng-repeat...
<table ng-repeat="item in customers | filter: { intrsted: true }">
<td ng-repeat="customer in item">{{customer.businessusername}}</td>
</table>
I was wondering, how do I put a filter a ng-repeat that will only bring back items that have colours? I was hoping to have a checkbox above the grid entitled "Show ones with colours" that would filter the list based on the count of the colours array when it was selected, and display ALL when unselected.
{
"_id": "54d13c3f3c25d5d8123a1d62",
"name": "Barry",
"colours": ["239, 101, 128"]
},
{
"_id": "54d13sfg5d5d8hgf6gg",
"name": "John",
"colours": []
},
{
"_id": "34d13sfg5d5d4tt6g",
"name": "Andrew",
"colours": []
},
{
"_id": "44d165d5d4t77t6g",
"name": "Gary",
"colours": ["25, 234, 22", "5, 100, 255"]
},
The following would give everyone not having colours:
<div ng-repeat="item in items | filter: { colours: '!' }">
Negate it again and you get everyone having colours:
<div ng-repeat="item in items | filter: { colours: '!!' }">
Demo: http://plnkr.co/edit/oIl3ohe0TLMWcQlTPuY5?p=preview
I think you an use a controller function to test for the presence of colours
so in haml/coffeescript
%tr{"ng-repeat2 => "item in list | filter: hasColour(item)"}
and hasColour is a controller function
$scope.hasColour= (item) ->
item.colours.length > 0
Untested I'm afraid
I have a directive that displays subcategories of a feature list.
Problem is, all items are displayed, regardles of the filters i use for the ng-repeat.
I use a filter to only show items with a certain category_uid and i also use a limitTo.
app.directive('featureCategory', function() {
return {
restrict: 'A',
transclude: true,
link: function($scope) {
$scope.featureCountBuffer = $scope.featureCount;
$scope.listLength = Object.keys($scope.featureList).length;
},
scope: {
featureList: '=',
featureCount: '#',
categoryId: '#'
},
template:
'<li>featureCountBuffer : {{featureCountBuffer}} / listLength {{listLength}} / categoryId {{categoryId}}</li>' +
'<check-item ng-repeat="feature in featureList | filter:{category_uid:categoryId} | limitTo: featureCountBuffer" feature="feature"></check-item>'
}
});
This shows above 40 items thou it starts with the li element showing featureCountBuffer is 5 andcategory_uid being 1 which only applies to 8 items.
Does anyone see my Mistake here?
The featureList looks like this:
{
"1": {
"uid": "1",
"title": "foo",
"category_uid": "1",
"checked": false
},
"2": {
"uid": "2",
"title": "bar",
"category_uid": "1",
"checked": false
},
"3": {
"uid": "3",
"title": "foobar",
"category_uid": "2",
"checked": false
},
"4": {
"uid": "4",
"title": "barfoo",
"category_uid": "2",
"checked": false
},
"5": {
"uid": "5",
"title": "barbar",
"category_uid": "3",
"checked": false
}
...
}
I found the Problem.
Angulars ng-repeat works with objects of objects but the filters do not.
You can either write your own filters to fix this or just use an array of objects.
I used lodash's _.toArray to convert mine. My Changes:
[..]
link: function($scope) {
[..]
$scope.featureList = _.toArray($scope.featureList);
},
[..]
Youcan read about it in more detail in this article.
Thanks for posting this! I found an alternative solution to use the $index property:
<ul>
<li ng-repeat="(id, value) in test" ng-if="$index < 3" >
{{ $index }} {{ id }} {{ value }}
</li>
</ul>