Angular: further dynamic filtering issue

Question

I am trying to get these dynamic filters to work, and almost everything I think. It seems that the model does not return to the watch function. I would suggest that it will work with the first set of filters, but it is not.

I try to ensure that when the user selects an option from the selection list and sets a value in the input field, the data is filtered. The user can optionally add another set of filters by clicking the "Add fields" button. If the user fills out a second set of filters, the data is then filtered further.

This is what I still have. If only one filter shows, shouldn't it just work?

This is code that creates user-defined filters.

<div data-ng-repeat="filter in filters"> <select ng-model="filter.id"> <option value="age">Age</option> <option value="customerId">CustomerID</option> <option value="productId">ProductID</option> <option value="name">Name</option> </select> <input type="text" ng-model="data.search[filter.id]"> <button class="remove" ng-show="$last" ng-click="removeFilter()">-</button> 

Add Fields

I think I'm almost there, better understood the hierarchical sphere. I mentioned a few lessons and examples, but not quite yet. I think my problem is that I am not passing models correctly. Still a little lost with this. Any further tips / suggestions would be great. I am wondering if I should move part of the code from the controller to my directive in the resultsCtrl controller. Not really sure.

This fiddle gave me an idea to use filter.id in my ng-repeat template

This plnkr was helpful.

I'm leaving now. This plnkr shows that it works, the last thing I want to do with it is when you remove the filter, it automatically updates the search object to remove the corresponding filter.

Any suggestions on how to do this?

Answer 1

In the end, I decided this :)

directive:

 angular.module('dynamicFiltersDirective', []) .directive('dynamicFilters', function() { return { restrict: 'AE', scope: { filtersArray: '=', searchObject: '=' }, link: function(scope) { scope.addFilter = function() { var newItemNo = scope.filtersArray.length+1; scope.filtersArray.push({'id':'filter'+newItemNo}); }; scope.removeFilter = function(option) { var lastItem = scope.filtersArray.length-1; scope.filtersArray.splice(lastItem); delete scope.searchObject[option]; }; scope.updateFilters = function (model) { scope.searchObject[model]; } }, templateUrl: 'filtertemplate.html' } }); 

controller:

 angular.module('app', ['dynamicFiltersDirective']).controller('resultsCtrl', function($scope){ $scope.filters = [{id: 'filter1'}]; $scope.search = {}; $scope.persons = [{ name: 'Jim', age: 21, customerId: 1, productId: 4 },{ name: 'Frank', age: 20, customerId: 2, productId: 4 },{ name: 'Bob', age: 20, customerId: 3, productId: 5 },{ name: 'Bill', age: 20, customerId: 3, productId: 5 }]; }); 

template:

 <div data-ng-repeat="filter in filtersArray"> <select ng-model="filter.id"> <option value="age">Age</option> <option value="customerId">CustomerID</option> <option value="productId">ProductID</option> <option value="name">Name</option> </select> <input type="text" ng-model="searchObject[filter.id]" ng-change="updateFilters(searchObject[filter.id])"> <button class="remove" ng-show="$last" ng-click="removeFilter(filter.id)">-</button> </div> <button class="addfields" ng-click="addFilter()">Add fields</button> <div id="filtersDisplay"> {{ filters }} </div> 

index.html

 <div ng-controller="resultsCtrl"> <dynamic-filters filters-array="filters" search-object="search"> </dynamic-filters> <div ng-repeat="person in persons | filter: search"> {{person.name}} </div> 

Here is my plnkr example

Answer 2

You are breaking the golden rule of "always have a point in ng-model ."

Why? because objects have inheritance, but primitives don't.

 ng-model="filterType" 

defined inside the child region created by ng-repeat . Since this is a primitive, the parent area in the controller cannot see it. However, if this is a property of an object accessible at the parent level, the link will be shared between the parent and the child.

Once you fix this error, you will encounter an error where scope.search not an object, so the $ watch function also throws an exception. In the main controller, you can install:

 $scope.search ={}; 

Read how hierarchical areas work in angular. There are many possibilities for searching the web and angular docs