Hello! I want to make a dynamic generation of filters for the list of data. That is, what would change the page "filters" and the contents of the page .. I create an object that contains an array of data about the filters I need

function DevCtrl ($scope) { $scope.filters = [ { 'name': 'IP контроллеры', 'filterName': 'IpCtrls' }, { 'name': 'Беспроводная система', 'filterName': 'Wireless' }, { 'name': 'Лифтовая система', 'filterName': 'LiftSystem' } ];

I receive an array of device objects from a service that executes a $ http request.
In the HTML view I want to display all this in the following way:

 <div class="part" ng-init = "vm.getDeviceList()"> <div ng-repeat = "filt in filters"> <h1 ng-click = "show =! show" class="part__title " ng-class = "{'is-active': !show }" ng-hide="!(vm.devices|{{filt.filterName}}).length" ng-bind="filt.name"></h1> <div class="part__content " ng-class = "{'is-active': !show }" ng-hide="!(vm.devices|{{filt.filterName}}).length"> <div class="part__item" ng-repeat = "item in vm.devices| filt.filterName " ng-click="choose =! choose "> </div> </div>

Does not read the filter name in the ng-repeat nested, namely ng-repeat = "item in vm.devices | filt.filterName", reads above.

Tell me, maybe I didn’t organize the filtering correctly? By my logic it should work ...

Error text:

 angular.js:13920 Error: [$parse:syntax] Syntax Error: Token '.' is an unexpected token at column 17 of the expression [vm.devices| filt.filterName] starting at [.filterName]. at http://localhost:8014/js/angular.js:68:12 at Object.throwError (http://localhost:8014/js/angular.js:14555:11) at Object.ast (http://localhost:8014/js/angular.js:14308:12) at Object.compile (http://localhost:8014/js/angular.js:14771:31) at Parser.parse (http://localhost:8014/js/angular.js:15700:29) at $parse (http://localhost:8014/js/angular.js:15865:39) at Scope.$watchCollection (http://localhost:8014/js/angular.js:17294:30) at Object.ngRepeatLink (http://localhost:8014/js/angular.js:29767:16) at invokeLinkFn (http://localhost:8014/js/angular.js:9934:9)
  • What error does it write in the browser console? - Grundy
  • in this case injector: unpr (Unknown provider) - I.Krainiev
  • if {{filt.filterName}} then the failit syntax is I.Krainiev
  • Add the full text of the error from the console to the question, use the non-minified version of the angular for debugging, it gives readable errors and not references - Grundy
  • I do not use minifitsirovannuyu and always gives such errors. - I.Krainiev

1 answer 1

This may not be implemented.

The main problem is that the filter name is obtained until the moment when there are variables, and therefore tries to find the specified string as is.

You can use a workaround from a similar English-language question.

Create a filter that will call filters:

the simplest case for calling filters without parameters:

 app.filter('applyFilter', function($filter) { return function(value, filterName) { return $filter(filterName)(value); }; });

Using:

 ng-repeat = "item in vm.devices| applyFilter:filt.filterName"