CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveionic-framework
Milind
Milind

Reputation: 1955

angularjs search filter issue

Below is my plnkr http://plnkr.co/edit/f6LYS2aGrTXGkZ3vrIDD?p=preview

I have issue on Search Page

angular.module('plexusSelect', []).directive('plexusSelect', ['$ionicModal',
    function($ionicModal) {
        // Runs during compile
        return {
            scope: {
                'items': '=',
                'text': '@',
                'textIcon': '@',
                'headerText': '@',
                'textField': '@',
                'textField2': '@',
                'valueField': '@',
                'callback': '&'
            },
            require: 'ngModel',
            restrict: 'E',
            templateUrl: 'templates/plexusSelect.html',
            link: function($scope, iElm, iAttrs, ngModel) {
                if (!ngModel) return; // do nothing if no ng-model
                $scope.allowEmpty = iAttrs.allowEmpty === 'false' ? false : true;
                $scope.defaultText = $scope.text || '';
                $ionicModal.fromTemplateUrl('plexusSelectItems.html', {
                    'scope': $scope
                }).then(function(modal) {
                    $scope.modal = modal;
                    $scope.modal['backdropClickToClose'] = false;
                });
                $scope.showItems = function($event) {
                    $event.preventDefault();
                    $scope.modal.show();
                };
                $scope.hideItems = function() {
                    $scope.modal.hide();
                };
                /* Destroy modal */
                $scope.$on('$destroy', function() {
                    $scope.modal.remove();
                });
                $scope.viewModel = {};
                $scope.clearSearch = function() {
                    $scope.viewModel.search = '';
                };
                /* Get field name and evaluate */
                $scope.getItemName = function(field, item) {
                    return $scope.$eval(field, item);
                };
                $scope.validateSingle = function(item) {
                    $scope.text = $scope.$eval($scope.textField, item) + ($scope.textField2 !== undefined ? " (" + $scope.$eval($scope.textField2, item) + ")" : "");
                    $scope.value = $scope.$eval($scope.valueField, item);
                    $scope.hideItems();
                    if (typeof $scope.callback == 'function') {
                        $scope.callback($scope.value);
                    }
                    ngModel.$setViewValue($scope.value);
                };              
                $scope.$watch('text', function(value) {
                    if ($scope.defaultText === value) $scope.placeholder = 'placeholderGray';
                    else $scope.placeholder = 'placeholderBlack';
                });
            }
        };
    }
])

Where in I have reference http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js ionic bundle than my second directive search filter will stop working but at the same time, if I reference http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js it works search filter in both directive.

In beta.14 angularjs 1.3 is used and in beta.1 angularjs 1.2

So somebody told me that it can be the migration issue, But I check angularjs migration documentation but I could not find anything. Kindly somebody help me what can be the issue.

Upvotes: 1

Views: 764

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

Problem:

This is due to the following breaking change in Angular 1.3.6.

Excerpt:

filterFilter: due to a75537d4,

Named properties in the expression object will only match against properties on the same level. Previously, named string properties would match against properties on the same level or deeper.

...

In order to match deeper nested properties, you have to either match the depth level of the property or use the special $ key (which still matches properties on the same level or deeper)

In the first use of your directive items have the following structure:

[
 { property: 'Value' }
]

And in your second use:

[
 { Destination: { property: 'Value' } }
]

Sadly a bug fix that you probably need wasn't introduced until 1.3.8:

filterFilter:

make $ match properties on deeper levels as well (bd28c74c, #10401)

let expression object {$: '...'} also match primitive items (fb2c5858, #10428)

Solution:

Use Ionic with AngularJS 1.3.8 or later.

Change your HTML to the following:

<label ng-repeat="item in items | filter: { $: viewModel.search }" ...

Initialize viewModel.search as an empty string:

$scope.viewModel = { search: '' };

Demo: http://plnkr.co/edit/ZAM33j82gT4Y6hqJLqAl?p=preview

Upvotes: 1

Related Questions