I want to filter a list and get all the elements which have an argument equals to true. But my argument is a property and I don't know how to tell to angularjs to compute it.
{{ list | filter: {argument: true} }}
For instance if I have scope.argument = 'foo' my html should interpret it like this
{{ list | filter: {'test': true} }}
Is it possible?
I found a solution.
I create a filter in my controller
scope.isSelected = function(element) {
return element[scope.argument] === true;
}
and then I use it in my html like this
{{ (list | filter: isSelected).length }}
I would prefer to do this directly in my html but I didn't find a way to do it.
Related
The Angular API reference docs uses braces [] when defining the $filter service. What do the braces mean in this context?
{{ expression [| filter_name[:parameter_value] ... ] }}
I think it means optional. However, I've seen code written like this:
<select ng-model="query.level" class="input-medium">
<option selected value="">All</option>
<option selected value="introductory">Introductory</option>
<option selected value="intermediate">Intermediate</option>
<option selected value="advanced">Advanced</option>
</select>
<ul>
<li ng-repeat="session in event.sessions | orderBy:sortorder | limitTo:2 | filter:query">
...
</li>
</ul>
And a controller like
$scope.event = {
sessions: [
{
name: 'Blah',
level: 'Advanced'
},
{
name: 'another thing',
level: 'Intermediate'
}
]
}
query is not a custom or pre-built filter. I fail to see the connection between filter:query and the documentation. Is filter an expression that includes a magic variable somehow initialized simply by it's use in ng-model?
I think the confusion is that filter used in this context does not mean "Angular filter" it actually means filter the list. It's the "filter" filter. The part after the colon in this case is not the name of a filter, but the argument to the "filter" filter.
orderBy is a filter.
limitTo is a filter.
filter is also a filter.
You do not write filter:orderBy or filter:limitTo, you just write orderBy or limitTo. So in the this case, they are writing filter, not filter:filter.
To put it another way, query IS NOT A FILTER. query is the argument to the filter filter, which is included in the list of built-in filters: https://docs.angularjs.org/api/ng/filter
I think that was just bad naming on Angular's part.
I want to determine the ascending/descending property of the ng-repeat by passing a value coming from a dropdown box.
I defined a variable called "asdc" whose value is determined by a dropdown box. This variable should determine if the table will be sorted ascending or descending. The variable already created in the AngularJS controller so I don`t post it here. I am pasting the codes below. It does not work this way. I am wondering what I am missing.
This is the table that I want to sort.
<tr ng-repeat="technology in technologies | limitTo: rowlimit | orderBy: sortby : adsc" >
<td>{{technology.name | uppercase}}</td>
</tr>
This is the drowdown box. It defines the value of adsc as true or false and passes the value to "adsc".
<select ng-model="adsc">
<option value="true">Asc</option>
<option value="false">Dsc</option>
</select>
Use ng-options to bind to something other than a string:
In controller:
$scope.directions = [
{
value: false,
label: 'Asc'
},
{
value: true,
label: 'Desc'
}
];
In view:
<select name="direction" ng-model="adsc"
ng-options="direction.value as direction.label for direction in directions">
</select>
Here's a plunkr demonstrating its use.
Also, note that passing true will sort in descending order, not ascending.
I'm using built-in currency filter:
{{ value | currency }}
I want to specify only the fraction size and let angular decide what currency symbol to show. How can I do that?
I have only one solution so far:
{{ value | currency:undefined:0 }}
But I don't really like it :)
Using #JB Nizet's suggestion, if you really don't like the undefined (it doesn't seem that bad to me), you can make your own filter that uses currency:
app.filter('currencyDigits', [
'$filter',
function($filter) {
return function(value, digits){
return $filter('currency')(value, void 0, digits);
};
}
]);
Then you can use it like this:
{{ value | currencyDigits:0 }}
I am new to angular js so please forgive me for this basic question.
I have an array of object literals and I want to add filter in angular js according to particular field type.
Array of object literals:
var todos= [{text: 'To-DO1', done: false,group:'Group1' }, {text: 'To-do2', done: false, group:'Group2' } ];
I am using this code:
<select data-ng-model="selectOption" data-ng-options="item as item.gtype for item in items"> </select>
<li data-ng-repeat="todo in todos track by $index | filter: selectOption.gtype ">
Above filter is not working
For populating the select I am using :
$scope.items = [
{gtype:'Group1'},
{gtype:'Group2'},`enter code here`
{gtype:'Group3'},
{gtype:'Group4'},
{gtype:'Group5'}
];
Could someone please help me through ?
The problem is with the track by $index. The correct place for it is at the end of the expression, after the filter (see ngRepeat documentation)...
<li data-ng-repeat="todo in todos | filter: selectOption.gtype track by $index">
Live Demo
Edit: As requested, here's an updated fiddle to show an alternate message if filter produces nothing...
Live Demo
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!