In my angularjs application,I am using multi select drop down https://tamtakoe.github.io/oi.select/#/select/#filtered, with the following:
<oi-multiselect ng-options="item.name for item in ins_Types " ng-model="insuranceTypes" multiple placeholder="Select" data-ng-required="true" name="insType" ></oi-multiselect >
and
$scope.ins_Types = [{id: 1, name : "ins1"},{id: 2, name : "ins2"}, {id: 3, name : "ins3"}, {id: 4, name : "ins4"}];
which is working fine for all the options in $scope.ins_Types. Now I want the option with id < 3 only to be displayed. So I have used the filter to options as shown below :
<oi-multiselect ng-options="item.name for item in ins_Types | filter:{id < 3} " ng-model="insuranceTypes" multiple placeholder="Select" data-ng-required="true" name="insType" ></oi-multiselect >
But since then the multi select dropdown stopped responding and none of the options are getting displayed.
I even tried | filter:{item.id < 5} but still the same problem.
You can create a custom filter for your requirement like
app.filter('myfilter', function() {
return function(input, condition) {
var filtered = [];
input.forEach(function(item, index) {
if (item.id > condition) {
filtered.push(item);
}
});
return filtered;
};
});
And in your markup use it like
<oi-select oi-options="item.name for item in ins_Types | myfilter : 3 track by item.id" ng-model="insuranceTypes" multiple placeholder="Select"></oi-select>
Live Plunker
Hope it helps.
Related
I'm using AngularJS on a project and I need to implement a select box with a filter to a nested property. My object (I have an array of those and I'm iterating through them via ng-repeat) has a structure similar to this:
{
id: 1,
name: 'Example',
groups: [
{ id: 1, name: 'Group 1' },
{ id: 2, name: 'Group 2' }
]
}
I need to filter the group ID of the elements, and after searching I've come up with two ways to do it:
1.
| filter: { $: { id: search.item_id } }
Which has these problems:
Apparently it searches for any nested properties named ID, so if I have more than one object inside my main object, with a property called ID too, it would add it to the filter. Example:
{
id: 2,
name: 'Example 2',
groups: [
{ id: 1, name: 'Group 1' },
{ id: 2, name: 'Group 2' }
],
categories: [
{ id: 1, name: 'Cat 1' },
{ id: 2, name: 'Cat 2' }
]
}
Filtering for ID 1 would select not only group with ID 1, but category with ID 1 too.
Also, with this method, even before setting the filter (search.item_id model is null), objects without groups are being filtered and not appearing in the list. These objects are like this:
{
id: 3,
name: 'Example 3',
groups: []
}
and the other way is:
2.
| filter: { groups: [{ id: search.item_id }] }
In this case, the problem is that it simply doesn't work, it filters everything, leaving the list blank, no matter if it's set or which option is selected.
How can I make it work? I've been searching and couldn't find anything about this. Filtering nested properties is (or should be) a very basic thing.
Update:
So, xtx first solution kinda did it, but only if I use input text or number, but I need to use a select box (more specifically uib-dropdown, but working in a regular select is the next step). My select box is looking like this:
<select name="filter_classes_groups_test" ng-model="search.group_id">
<option val="group.id" ng-repeat="group in classesGroups">{{ group.name }}</option>
</select>
When I interact with it, nothing happens.
If creating a custom filter works for you, here is how you can do that:
app.filter('groupsFilter', function() {
return function(input, groupId) {
var out = [];
if (!groupId || isNaN(parseInt(groupId))) {
return input;
}
angular.forEach(input, function(item) {
if (item.groups && angular.isArray(item.groups)) {
angular.forEach(item.groups, function (group) {
if (group.id === parseInt(groupId)) {
out.push(item);
}
});
}
});
return out;
}
});
As you can see, the custom filter has name groupsFilter, and takes group id to search for as a parameter. The filter can be applied like this:
<div ng-repeat="item in data | groupsFilter:search.item_id">
...
</div>
UPDATE:
Instead of creating a custom filter, you can just create a function that implements filtering logic, in scope like this:
$scope.groupsFilterLocal = function(value) {
if (!$scope.search.item_id || isNaN(parseInt($scope.search.item_id))) {
return true;
}
if (!value || !value.groups || !angular.isArray(value.groups)) {
return false;
}
for (var i = 0; i < value.groups.length; i++) {
if (value.groups[i].id === parseInt($scope.search.item_id)) {
return true;
}
}
return false;
};
and then apply it using build-in filter like this:
<div ng-repeat="item in data | filter:groupsFilterLocal ">
...
</div>
Notice that in this case you can't pass the value to search for (search.item_id) into your function groupsFilterLocal like it is done for the custom filter groupsFilter above. So groupsFilterLocal has to access search.item_id directly
UPDATE 2: How to create a select properly
The reason why the filter is not applied when you pick a group in your dropdown, is in the way how you defined the select. Instead of the id of the selected group, search.group_id gets assigned group's name.
Try defining the select like shown below:
<select name="filter_classes_groups_test" ng-model="search.item_id" ng-options="group.id as group.name for group in classesGroups">
<option value="">-- Choose Group --</option>
</select>
To ensure that search.item_id gets id of the group that is selected (and not its name), try temporarily adding {{ search.item_id }} somewhere in your template.
I have a list of checkboxs:
<input type="checkbox" ng-model="myFilter.filterField" ng-true-value="'value1'" ng-false-value="''"> value1<br>
<input type="checkbox" ng-model="myFilter.filterField" ng-true-value="'value2'" ng-false-value="''"> value2<br>
....
....
And I want to filter the checked checkboxes fields like this:
x in X | filter: { 'filterField': ['value1','value2']}
Any solution to push into my array filterField and filter more than one value? Thanks!
From AngularJS : Custom filters and ng-repeat
Checking multiple fields
// Filter, where element would be your x
$scope.filterFn = function(element)
{
if(element.field === 'value1' || element.anotherField === 'value2')
{
return true; // this will be listed in the results
}
return false; // otherwise it won't be within the results
};
And then apply it
x in X | filter:filterFn
Another way would be to use one custom filter and add parameters to it. This fiddle shows how to work with a filter with multiple parameters:
http://jsfiddle.net/halirgb/Lvc0u55v/
Like this
myApp.filter('customFilter', function() { // Name of filter
return function(first, second,third) {
// write filter code here
return second;// shows the last filter parameter
};});
And use the filter like this:
<div ng-repeat="x in X"> {{x|customFilter:myFilter.filterField}} </div>
It is better to use custom filters in that case
$scope.filterField = function(x) {
return x.filterField == 'value1' || x.filterField == 'value2' || x.anotherField == 'value';
};
x in X | filter: filterField
Here is my data
This.dynamicCmb = [{
id: 1,
label: 'aLabel',
subItem: ['aSubItem1','aSubItem2','aSubItem3']
}, {
id: 2,
label: 'bLabel',
subItem: [ 'bSubItem' ]
}];
I want to display 'subItem' data depending on the value I give i.e, either id or label. if I search any one it should display value.
<input type="text" ng-model="vm.selectedColumn" /> //Textbox to take either id or name value
<input type="button" value="Get" ng-click="GetCmbValue()" /> //On click of button it should load dropdown
<select ng-options="item.name for item in vm.selectedColumn.subItem" ng-model="vm.selected"></select>
.js file
This.GetCmbValue = function () {
// I should load drop down value here
};
for eg: if I give '1' in textbox then subItem of '1' should display. If I give 'alabel' in textbox then also subItem of 'alabel' should display. It should search either on id or label whatever I give. Please help me to do this
You can attach filter to your ngOption. So that every time you type value in textbox, it will filter data accordingly.
We bind the output of textbox to the filter.
.js file
app.filter('itemFilter', function() {
return function(input,val) {
var out = new Array();
angular.forEach(input, function(item) {
if (item.id == val || item.label == val) {
out = out.concat(item.subItem);
}
});
return out;
};
});
HTML File
<input type="text" data-ng-model="val">
<select data-ng-options="item for item in dynamicCmb | itemFilter : val" data-ng-model="selected"></select>
change your select code by this
<select ng-options="item.name for item in vm.selectedColumn.subItem|filter:{Id:vm.selectedColumn}" ng-model="vm.selected"></select>
Tried the solution given in Showing unique dropdown options in Angularjs
<select ng-model="categorySelected" ng-options="c.category for c in accounts|unique:'category'">
</select>
<div ng-repeat="c in accounts| filter:categorySelected">
.........
</div>
app.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});
I also tried
<div ng-repeat="c in accounts| filter:{templateCategory: categorySelected}">
I have rows fetched from the table and is getting displayed on the html. I want to list unique categories from the result in dropdown. But on selection, i want all the rows belonging to that category to be listed. Now i get the unique categories in the dropdown but even the ng-repeat results show only the unique results which should not be the case. Please help.
I suspect the problem is in the use of filter in ngRepeat.
1) Use as to set categorySelected to the value of the category selected in the dropdown...
<select ng-model="categorySelected"
ng-options="a.category as a.category for a in accounts | unique:'category'">
</select>
2) User filter: { category: categorySelected } in ngRepeat to filter accounts by category based on the current value of categorySelected...
<div ng-repeat="a in accounts | filter : {category: categorySelected}">
{{ a.name }}
</div>
JSFiddle
Following angular.js conditional markup in ng-repeat, I tried to author a custom filter that does grouping. I hit problems regarding object identity and the model being watched for changes, but thought I finally nailed it, as no errors popped in the console anymore.
Turns out I was wrong, because now when I try to combine it with other filters (for pagination) like so
<div ng-repeat="r in blueprints | orderBy:sortPty | startFrom:currentPage*pageSize | limitTo:pageSize | group:3">
<div ng-repeat="b in r">
I get the dreaded "10 $digest() iterations reached. Aborting!" error message again.
Here is my group filter:
filter('group', function() {
return function(input, size) {
if (input.grouped === true) {
return input;
}
var result=[];
var temp = [];
for (var i = 0 ; i < input.length ; i++) {
temp.push(input[i]);
if (i % size === 2) {
result.push(temp);
temp = [];
}
}
if (temp.length > 0) {
result.push(temp);
}
angular.copy(result, input);
input.grouped = true;
return input;
};
}).
Note both the use of angular.copy and the .grouped marker on input, but to no avail :(
I am aware of e.g. "10 $digest() iterations reached. Aborting!" due to filter using angularjs but obviously I did not get it.
Moreover, I guess the grouping logic is a bit naive, but that's another story. Any help would be greatly appreciated, as this is driving me crazy.
It looks like the real problem here is you're altering your input, rather than creating a new variable and outputing that from your filter. This will trigger watches on anything that is watching the variable you've input.
There's really no reason to add a "grouped == true" check in there, because you should have total control over your own filters. But if that's a must for your application, then you'd want to add "grouped == true" to the result of your filter, not the input.
The way filters work is they alter the input and return something different, then the next filter deals with the previous filters result... so your "filtered" check would be mostly irrelavant item in items | filter1 | filter2 | filter3 where filter1 filters items, filter2 filters the result of filter1, and filter3 filters the result of filter 2... if that makes sense.
Here is something I just whipped up. I'm not sure (yet) if it works, but it gives you the basic idea. You'd take an array on one side, and you spit out an array of arrays on the other.
app.filter('group', function(){
return function(items, groupSize) {
var groups = [],
inner;
for(var i = 0; i < items.length; i++) {
if(i % groupSize === 0) {
inner = [];
groups.push(inner);
}
inner.push(items[i]);
}
return groups;
};
});
HTML
<ul ng-repeat="grouping in items | group:3">
<li ng-repeat="item in grouping">{{item}}</li>
</ul>
EDIT
Perhaps it's nicer to see all of those filters in your code, but it looks like it's causing issues because it constantly needs to be re-evaluated on $digest. So I propose you do something like this:
app.controller('MyCtrl', function($scope, $filter) {
$scope.blueprints = [ /* your data */ ];
$scope.currentPage = 0;
$scope.pageSize = 30;
$scope.groupSize = 3;
$scope.sortPty = 'stuff';
//load our filters
var orderBy = $filter('orderBy'),
startFrom = $filter('startFrom'),
limitTo = $filter('limitTo'),
group = $filter('group'); //from the filter above
//a method to apply the filters.
function updateBlueprintDisplay(blueprints) {
var result = orderBy(blueprints, $scope.sortPty);
result = startForm(result, $scope.currentPage * $scope.pageSize);
result = limitTo(result, $scope.pageSize);
result = group(result, 3);
$scope.blueprintDisplay = result;
}
//apply them to the initial value.
updateBlueprintDisplay();
//watch for changes.
$scope.$watch('blueprints', updateBlueprintDisplay);
});
then in your markup:
<ul ng-repeat="grouping in blueprintDisplay">
<li ng-repeat="item in grouping">{{item}}</li>
</ul>
... I'm sure there are typos in there, but that's the basic idea.
EDIT AGAIN: I know you've already accepted this answer, but there is one more way to do this I learned recently that you might like better:
<div ng-repeat="item in groupedItems = (items | group:3 | filter1 | filter2)">
<div ng-repeat="subitem in items.subitems">
{{subitem}}
</div>
</div>
This will create a new property on your $scope called $scope.groupedItems on the fly, which should effectively cache your filtered and grouped results.
Give it a whirl and let me know if it works out for you. If not, I guess the other answer might be better.
Regardless, I'm still seeing the $digest error, which is puzzling: plnkr.co/edit/tHm8uYfjn8EJk3cG31DP – blesh Jan 22 at 17:21
Here is the plunker forked with the fix to the $digest error, using underscore's memoize function: http://underscorejs.org/#memoize.
The issue was that Angular tries to process the filtered collection as a different collection during each iteration. To make sure the return of the filter always returns the same objects, use memoize.
http://en.wikipedia.org/wiki/Memoization
Another example of grouping with underscore: Angular filter works but causes "10 $digest iterations reached"
You can use groupBy filter of angular.filter module,
and do something like this:
usage: (key, value) in collection | groupBy: 'property'or 'propperty.nested'
JS:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
HTML:
<ul ng-repeat="(key, value) in players | groupBy: 'team'" >
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
<!-- result:
Group name: alpha
* player: Gene
Group name: beta
* player: George
* player: Paula
Group name: gamma
* player: Steve
* player: Scruath