AngularJs pass a fitler expression to directive with true at the end

Question

I have a directive for the mover list called smDualList. The directive has the following template (partial code):

<div>
                <select class="select-list" multiple
                        ng-model="unassigned"
                        name="unAssignedList"
                        data-no-dirty-check
                        ng-options="unassignedItem.descrip for unassignedItem in unassignedItems | orderBy:'descrip' | filter: filterCriteria"></select>
            </div>

This is my page markup:

<data-sm:duallist-directive ng-required="false" keep-pristine="true"
                                        unassigned-items-title="'@String.Format(Labels.availableX, Labels.items)'"
                                        unassigned-items="currentBenefit.unassignedItems"
                                        assigned-items-title="'@String.Format(Labels.assignedX, Labels.items)'"
                                        assigned-items="currentBenefit.assignedItems"
                                        sortable="false"
                                        filter-criteria="{'categoryId':selectedCategoryId}"
                                        selected-item="currentBenefit.selectedItem">
            </data-sm:duallist-directive>

with the following code for the directive.js file:

 restrict: 'E',
            templateUrl: 'app/templates/smDuallist',
            require: ['^form'],
            scope: {
                assignedItems: '=assignedItems',
                unassignedItems: '=unassignedItems',
                assignedItemsTitle: '=',
                unassignedItemsTitle: '=',
                filterCriteria: '=',
                sortable: '=sortable',
                selectedItem: '=?',
                keepPristine: '=?'
            },
            link: function (scope, element, attrs, ctrls) {
                scope.form = ctrls[0];
                if (!scope.keepPristine)
                    scope.keepPristine = false;                
            }

So, the problem is that I need to add a true parameter at the end of the filter-criteria expression, so it would read as

filter-criteria="{'myColumn': myScopeProperty}:true"

Unfortunately, when I try to put it exactly like this on the form I get an error.

May be there is a way to somehow add that true parameter in the directive JavaScript code instead?

That last parameter is from the following discussion: Angular filter exactly on object key

I can probably create a filter function, but how can I create it to be generic enough to know which property to use? Because I have several movers in my form and I don't want to create a function in the controller for each of them.

angular.js:13920 [Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 34 of the expression [{'categoryId':selectedCategoryId}:true] starting at [:true].] — Naomi, May 18 '17 at 16:09

score 1 · Accepted Answer · answered May 18 '17 at 16:12

1

Just write :true after your filtercriteria. If you need it flexible, you can define truealso as a variable. Sample

Example:

var myApp=angular.module('myApp', []);

myApp.controller('Ctrl',function ($scope) {
  $scope.myfilter = {'id':  1};    
  $scope.excactfilter = true;
  $scope.users = [
{"id":1,"username":"simon",},
{"id":8,"username":"betty",},
{"id":14,"username":"archie",},
{"id":3,"username":"jumbo1"},
  ];     
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="Ctrl">
<div ng-repeat="user in users | filter:myfilter:excactfilter">
  <span>{{ user.username }}, {{ user.id }}</span>
</div>
  </div>
</body>

answered May 18 '17 at 16:12

Stefan

14,826
17
80
143

I am going to try that, but I am a bit worried. I have many cases where I don't define any filter-criteria at all. Would it still work? – Naomi May 18 '17 at 16:19
Seems to be working well. As always, I was trying to over-complicate things. Thanks, Stefan – Naomi May 18 '17 at 16:23
1

if you leave filter element empty you get all results, no metter if you define excact or not. Sample: filter: {}:true. Thanks – Stefan May 18 '17 at 16:24

AngularJs pass a fitler expression to directive with true at the end

1 Answers1