I've created multiple select dropdowns that are populated from a JSON file containing categories.
My goal is to use the selections made by users in the dropdowns to filter a list of apps generated using ng-repeat.
In my Plunker example http://plnkr.co/edit/ipfVfH3pbLoYk1u4n3la?p=preview, the user choices are stored in an object, but I am unable to use this as a filter for ng-repeat according to what I have been told.
Is it possible to utilize these selections for filtering purposes, or can they be converted?
This issue stems from a previous post of mine - Dynamically create multiple dropdowns angularjs from a single JSON file
I also have an alternate version rendering each select individually. It employs a custom groupBy filter (using underscore):
app.filter('groupBy', ['$parse', function ($parse) {
return function groupByFilter(input, groupByExpr) {
return _.groupBy(input, $parse(groupByExpr));
};
}]);
Here's how it looks:
<div ng-repeat="(categoryTypeName, categories) in groupedCategories track by categoryTypeName">
<label>{{categoryTypeName}}</label>
<select
ng-model="selected[categoryTypeName]"
ng-options="c as c.name for c in categories track by c.id"
multiple
></select>
</div>
Unfortunately, applying the filter has to be done when the data changes,
$scope.$watchCollection('categories', function (categories) {
$scope.groupedCategories = groupByFilter(categories, 'categoryType.name');
});
This is necessary because directly using it with ng-repeat will trigger an Infinite $digest Loop error in AngularJS.
So, can the output (users' choices) be used to filter the repeat items?
What I need is to filter the apps based on the selected category name. If an app is not tagged with the chosen category, it should not be displayed. Each app can be tagged with any available tags from the dropdowns.
--- ADDITIONAL INFORMATION ---
In the same controller as the filters mentioned above and in the Plunker demo, the list of displayed apps will also be managed. They will be located within the same view, similar to the image I currently have. Parts of the image have been blurred for privacy reasons.
https://i.sstatic.net/NBtOH.jpg - apologies for the low-quality screenshot.
The ng repeat structure I'm currently using for the apps is;
<div class="col-md-4"
ng-repeat="app in objects | filter:query |orderBy:'-createdAt'">
'Query' here refers to a simple search input box.
To generate the dropdowns for multiple choice selection, I'm using this repeat block;
<div ng-repeat="(categoryTypeName, categories) in groupedCategories track by categoryTypeName">
<label>{{categoryTypeName}}</label>
<br>
<select class="form-control" multiple class="span4 chzn-select" chosen data-placeholder=" "
ng-options="c as c.name for c in categories track by c.id"
ng-model="selected[categoryTypeName]"
></select>
The 'Chosen' plugin is utilized to enhance the visual display of multiple selections.
Each displayed app can be clicked on to access more details. Apps can have one or multiple tags, all of which can be filtered by using the dropdown menus created.
As seen in the image provided, users can filter by selecting multiple categories from any of the categoryTypes. The specific request from stakeholders is to keep each filter dropdown separate and allow users to choose multiple categories from different types to apply filters.
The following code snippet illustrates the controller responsible for generating the apps;
$scope.objects = [];
$scope.getData = function (cb) {
return appFactory.query(function (data) {
$scope.objects = data;
if (cb) cb();
}, function(data) {
alert("ERROR getting all applications");
});
};
$scope.getData();
var successCallback = function (e, cb) {
alertService.add("success", "Success!");
$scope.getData(cb);
};
'cb' represents a successful callback function declared in the controller.
And here is the factory definition:
.factory('appFactory', function ($resource) {
return $resource(
'resources/appstore/applications/:id',
{ id:'@id' },
{ 'update': { method: 'PUT'} }
);
})
The desired functionality involves dynamically filtering apps as users make selections, similar to the text search demo in AngularJS, where apps matching the criteria are shown. Removing a category from the filter list should also update the displayed apps accordingly. I hope that clarifies the requirements.
I believe this covers all the information needed. If there are any crucial details missing, please feel free to let me know.