Filters using custom directive requirement

angularjs
project

#1

I need to add filteting for list. For example there is a list of orders and we want to add filters for it like filter by brand, by buyer, by agent (this should be dynamic). We need create something more generic (or easily reproducible to other pages). In directive we will specify generic filters and that whole directive will prepare for us some generic structure which will describe selected filter, and which will be sent to serverside. Those directive will generate the filter from some setup. becase every filter has different fields and different type of usercontrol (some of them will be lists, some of them just checkbox and in future there can be need to create completely custom filter type. (for example side filter in any e commerce site).

I am thinking about something like that

<filter>   
   <filterparam-list resultArray="scopewherewillbearrayoffilteredvalues" inputArray="array of values to select"/></filterparam-list> 
   <filterparam-text resultArray="scopewherewillbearrayoffilteredvalues" inputArray="array of values to select"/></filterparam-text> 
.
.
.
</filter>

Here we will have main Filter directive, which will handle displaying all content in that component and will be able return json structure, which will represent the filter. other directives will be specific FilterRows and they will handle logic how to display that filter type, with which data and will return json structure describing that one FilterRow. Main Filter directive will just take these jsons together and return merged version of completed filter, For example there will be a dropdown of category user will select one of them, lets assume Sports, Right next to that category dropdown we will have + button on click of that a new dropdown will be generated just below that previous one from where user can select second category "Motor" so result will be list of products which falls in Sport OR Motor category, same as category suppose we have separate filter called color. Now assume that user has selected 'bike' from category which is one top filter and 'black' from color which also a top filter so in this case result will be bike with black color. Bike AND Black and color will also have same + button as category. If user selects black first and then from second he select white. So now Bike AND (Black OR White).

Please provide your valuable feedback asap.


#2

Can you add the code please?


#3

Hello, following is the code I've written for nested directive.
shonectAdminApp.controller('FilterController', function ($http, $auth, $scope, $window, Brand, $stateParams) {
$scope.brands = Brand.query();
}).directive("filter", function () {
return {
restrict: 'E',
scope: {},
link: function (scope, element) {
scope.isEnabled = true;
}
};
}).directive("filterparamList", function ($compile) {
return {
restrict: 'E',
link: function (scope, ele, attrs) {
console.log(attrs.inputarray);
scope.$watch("'" + attrs.watchval + "'", function (newVal) {
if (newVal) {
var html = '\
\
\
\
\
';
return ele.html($compile(html)(scope));
}
}, true);
},
replace: true
};
}).directive("filterparamText", function ($compile) {
return {
restrict: 'E',
link: function (scope, ele, attrs) {
var html = '';
return ele.html($compile(html)(scope));
},
replace: true
};
});
but somehow when I select any value from ui-select list it throws the error.
angular.js:12783 Error: [ui.select:items] http://errors.angularjs.org/1.4.10/ui.select/items?p0=Expected%20an%20array…%93%20Free%20Carrier%22%7D%5D%2C%22%24%24hashKey%22%3A%22object%3A73%22%7