angularjs搜索过滤器问题

时间:2015-01-23 04:42:44

标签: javascript angularjs angularjs-directive ionic-framework

以下是我的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 离子束比我的第二个指令搜索过滤器将停止工作但同时,如果我引用 http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js 它在两个指令中都有搜索过滤器。

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

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

1 个答案:

答案 0 :(得分:1)

问题:

这是由于Angular 1.3.6中的following突破性变化。

摘录:

  

filterFilter:由于a75537d4,

     

表达式对象中的命名属性仅匹配   同一级别的属性。以前,命名字符串属性   将匹配同一级别或更深层次的属性。

     

...

     

为了匹配更深层次的嵌套属性,您必须匹配   属性的深度级别或使用特殊的$ key(仍然   匹配同一级别或更深层次的属性)

首次使用您的指令items时,请使用以下结构:

[
 { property: 'Value' }
]

在你的第二次使用中:

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

遗憾的是,您可能需要的错误修复程序直到1.3.8

才会引入
  

filterFilter:

     

在更深层次上制作$ match属性   (bd28c74c,#10401)

     

让表达式对象{$:'...'}也匹配   原始项目(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

相关问题