In AngularJS, I would like to show a counter that shows "done/all" tasks for each of the below groups, i.e. in this case :
food: 1/2
hygienics: 0/1
List of tasks:
$tasks = [
{
title: "buy bacon",
group: "food",
done: "true",
},
{
title: "buy tuna",
group: "food",
done: "false",
},
{
title: "buy toothpaste",
group: "hygienics",
done: "false",
},
];
The counter should automatically update whenever I set a task's "done" to "true". So really, I am looking for a nice filtered expression, like the following (but with "done" worked in):
Food: {{ ( tasks | filter: {group:'food'} ).length }}
How can I include "done" into this?
From the documentation:
You can chain filters using this syntax:
{{ expression | filter1 | filter2 }}
so just chain an additional filter:
tasks | filter: {group:'food'} | filter: {done: true}
Or, still from the documentation
expression – {string|Object|function()} –
The predicate to be used for selecting items from array.
Can be one of:
[...]
Object: A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1".
So you could also use
tasks | filter: {group:'food', done: true}
Not tested, though.
Related
I am trying to groupby an array of objects w.r.t to one property of the object. What is the best way to acheive it?
sample:
{
name: "India",
capital: "New Delhi",
cities:[{
name: "city1",
state:"state1"
},
{
name:"city3",
state:"state2"
}
....
{
name:"city56",
state:"state1"
}]
}
What's the best way to display it grouped by state? Should I use pipes or group the array using typescipt? Is there grouping pipe available in angular4?
There are several ready to use pipe collections for Angular2+ which include groupBy pipes. Two possible examples are:
ng-pipes
<div *ngFor="let item of items | groupBy: 'state'">
angular-pipes
<div>{{ arrayObject | groupBy: 'state' }}</div>
You can use lodash like this:
_.groupBy(myCityList, 'state')
Note that myCityList is the internal list that has the state property, like so:
const myCityList = [
{
name: "city1",
state:"state1"
},
{
name:"city3",
state:"state2"
},
{
name:"city56",
state:"state1"
}];
see the code below.
i am new in angular. just do not understand this line
{{ (fields | filter : {fieldName:"houseNum"} : true)[0].fieldLabel}}
what is the meaning of true in bracket if we specify false like ({{ (fields | filter : {fieldName:"houseNum"} : false)[0].fieldLabel}}) then what will happen ?
Full code
<div ng-app="app" ng-controller="ctrl">
{{ (fields | filter : {fieldName:"houseNum"} : true)[0].fieldLabel}}
</div>
angular.module('app', []).controller('ctrl', function($scope) {
$scope.fields = [{
fieldName: 'houseNum',
fieldLabel: 'House Number',
disabled: false
}, {
fieldName: 'street',
fieldLabel: 'Street',
disabled: false
}, {
fieldName: 'city',
fieldLabel: 'City',
disabled: true
}, {
fieldName: 'state',
fieldLabel: 'State',
disabled: true
}, ]
})
sample taken from https://jsfiddle.net/tridip/q2r3cogj/
According to the AngularJS documentation:
Comparator which is used in determining if values retrieved using expression
(when it is not a function) should be considered a match based on the the
expected value (from the filter expression) and actual value (from the object
in the array).
Can be one of:
function(actual, expected): The function will be given the object value and
the predicate value to compare and should return true if both values should be
considered equal.
true: A shorthand for function(actual, expected) { return
angular.equals(actual, expected)}. This is essentially strict comparison of
expected and actual.
false: A short hand for a function which will look for a substring match in a
case insensitive way. Primitive values are converted to strings. Objects are
not compared against primitives, unless they have a custom toString method
(e.g. Date objects).
Defaults to false.
So setting it to true requires an exact match for the item to be shown. A false setting will allow for partial matches, case insensitive matches, etc.
I've been trying to filter an array using Angular like this:
{{ (array | filter: { property: { subproperty: 'value' } }).length }}
and it works great.
Then I tried:
{{ (array | filter: { property: { subproperty1: 'value1', subproperty2: 'value2' } }).length }}
and noticed that Angular interprets this as an OR operation for the 2 subproperties.
How do I filter by 2 or more subproperties as an AND operation?
Thanks!
What you trying to do basically adding an additional filter to the current one. Try using the following and it should work as an AND filter.
{{ (array | filter: { property: { subproperty1: 'value1'}}
| filter: { property: { subproperty2: 'value2'}}).length }}
-- EDIT --
According to the angularjs docs:
A pattern object can be used to filter specific properties on objects contained
by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" AND property phone containing "1".
I prepared the following filter (arguments) based on the pointers in the docs and it works perfect for me.
{{ (array | filter: { property.subproperty1 : 'value1',
property.subproperty2 : 'value2' }).length }}
functional fiddle
P.S. - I also tried to figure out why your code was acting as an OR operator, but it never worked for me. non-functional fiddle
Cheers!
I'm trying to find a good way to filter on click, based on a boolean value that's within a nested array.
My current scope looks like the following
$scope.persons = [
{
firstName : 'Drew',
lastName : 'Minns',
views : [
{
name : 'View 1',
support : true
},
{
name : 'View 2',
support : false
}
],
},
{
firstName : 'Peter',
lastName : 'Parker',
views : [
{
name : 'View 1',
support : false
},
{
name : 'View 2',
support : false
}
],
}
];
I'm looking to add a filter that sorts based on the boolean value of each view object. The problem that I'm running into is that I can't access that value without iterating over every array. Doing that is making it tough to access each individual value without referencing the array number.
I want to hide the parent object based on whether or not the specific "view" object has a true or false in the support field.
Again, I'm looking to do this on click, so the idea is that you click a button for 'View 1' and only those parent objects with true value for support shows up. There will be multiple buttons for each "view" so I'm looking to provide the action of drilling down based on support for views.
Here's a plunkr http://plnkr.co/edit/ipi8vKEbxps2H89HTg00?p=preview
You can use Angular JS's "Filter" function to do this. Plunkr example, with the relevant change below
http://plnkr.co/edit/LHTpRqHbTxEAslY0rd5J?p=preview
<ul ng-repeat="view in person.views | filter:{ support: true }">
Edit: For what you want, I've slapped together a quick custom filter: http://plnkr.co/edit/LHTpRqHbTxEAslY0rd5J?p=preview
I want to filter on a select like so :
<select ng-model="test" ng-options="c as c.label group by c.type for c in columns
| filter:{c.type:'!field'} | filter:{c.type:'!map'}"></select>
EDIT : Adding the column model :
Columns = [
{
name: "name",
label: "Label",
info: "Information displayed in help",
type: "type",
view: "html template",
style: "min-width: 10em;",
show: true
},
{
...
}
];
Columns is used for several things and to optimize my code I need it to be also in a Select, but without the entries whose type are 'field' nor 'map'
Yet, I get to choose from everything, even the entries which types are 'field' and 'map'.
Is there a clean way to do it ?
AngularJS NOT Filter
<select ng-model="test" ng-options="c as c.label group by c.type for c in columns
| filter:{ type : '!field' }
| filter:{ type : '!map' }">
</select>
Fiddle
From the docs:
"...The predicate can be negated by prefixing the string with !."
"A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1"..."