angularjs 搜索过滤器问题

Question

下面是我的plnkr http://plnkr.co/edit/f6LYS2aGrTXGkZ3vrIDD?p=preview

我在搜索页面上遇到问题

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';
                });
            }
        };
    }
])

在我参考的地方 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 它在两个指令中都可以使用搜索过滤器。

在 beta.14 中使用 angularjs 1.3，在 beta.1 中使用 angularjs 1.2

所以有人告诉我这可能是迁移问题，但我检查了 angularjs 迁移文档，但我找不到任何东西。请有人帮助我解决问题。

Answer 1

问题：

这是由于 following 在 Angular 1.3.6.

中的重大变更

摘录：

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)

在第一次使用你的指令时items有如下结构：

[
 { property: 'Value' }
]

第二次使用时：

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

遗憾的是，直到 1.3.8:

才引入您可能需要的错误修复

filterFilter:

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

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

解决方案：

将 Ionic 与 AngularJS 1.3.8 或更高版本一起使用。

将您的 HTML 更改为以下内容：

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

将viewModel.search初始化为空字符串：

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

演示： http://plnkr.co/edit/ZAM33j82gT4Y6hqJLqAl?p=preview

angularjs 搜索过滤器问题

angularjs search filter issue

javascript

angularjs

angularjs-directive

ionic-framework

问题：

解决方案：