Question

我正在使用ng-repeat从猫头鹰旋转木马中查看来自json文件的PS4游戏数据：

<data-owl-carousel class="owl-carousel" data-options="{navigation: true, pagination: false, rewindNav : false}">
  <owl-carousel-item ng-repeat="game in $ctrl.games | filter: $ctrl.query" class="item">
                <a href="#!/games/{{game.id}}" class="thumb">
                    <img ng-src="{{game.imageUrl}}"  />
                    <p id="gamenamebox"> {{game.name}} </p>
                </a>
                <p> Genre: {{game.genre}} </p>

现在您可以看到我为$ ctrl.query添加了一个过滤器，并将其添加到搜索输入中：

                Search for game:
            <input ng-model="$ctrl.query"/>

现在，一切都运转良好，所有信息都在旋转木马中，看起来像这样：

working great

但是一旦我在搜索输入中搜索并删除游戏名称，我就会搜索所有内容，如下所示：

breaks

有谁知道我该如何解决？提前谢谢。

这是javascript代码：

.directive("owlCarousel", function() {
return {
    restrict: 'E',
    transclude: false,
    link: function (scope) {
        scope.initCarousel = function(element) {
          // provide any default options you want
            var defaultOptions = {
            };
            var customOptions = scope.$eval($(element).attr('data-options'));
            // combine the two options objects
            for(var key in customOptions) {
                defaultOptions[key] = customOptions[key];
            }
            // init carousel
            $(element).owlCarousel(defaultOptions);
        };
    }
};
})

.directive('owlCarouselItem', [function() {
return {
    restrict: 'E',
    transclude: false,
    link: function(scope, element) {
      // wait for the last item in the ng-repeat then call init
        if(scope.$last) {
            scope.initCarousel(element.parent());
        }
    }
};
}]);

如何使用ng-repeat搜索过滤器与猫头鹰旋转木马而不制动它

0 个答案: