Question

我是AngularJS的新手，对于一个项目，我需要创建一个交互式搜索引擎。

所以我现在就这样做了：

文章/视图/ articles.html

<form class="form-inline">
   <div class="form-group">
        <label for="filter-text">Text </label>
        <input type="search" class="form-control" id="filter-text" placeholder="Search for text" ng-change="applyFilter();" ng-model="filters.text">
   </div>
   <div class="form-group">
        <label for="filter-date-start">Entre </label>
        <input type="date" class="form-control" id="filter-date-start" placeholder="Entre" ng-change="applyFilter();" ng-model="filters.date_start">
   </div>
   <div class="form-group">
        <label for="filter-date-end">Et </label>
        <input type="date" class="form-control" id="filter-date-end" placeholder="Et" ng-change="applyFilter();" ng-model="filters.date_end">
   </div>
</form>

<div class="hidden-sm hidden-xs col-md-6">
    <div
            ng-repeat="article in articles"
            class="article"
            ng-include="'article/views/article.html'" >
    </div>
</div>

文章/视图/ article.html

<div ng-hide="article.isHidden">
    <!-- My Article DOM -->
</div>

文章/ article.js

angular
.factory('articleRetriever', function ($http, $q){

    this.getLast = function( id ){

        var url = 'http://localhost:8080/articles/';
        if (id) url += id;

        return $http.get(url ,{'Access-Control-Allow-Origin': 'localhost:*'})
            .then(function(response) {
                var articles = [];
                for (var idx in response.data.data) {
                    var article = response.data.data[idx];
                    article.isHidden = false;
                    articles.push(article);
                }
                return articles;
            });
    };
return this;
})

.controller('ArticlesCtrl', ['$scope', 'articleRetriever', function($scope, articleRetriever) {
    $scope.articles = [];
    $scope.filters = { tag: null, date_start : null, date_end : null, text : null };
        articleRetriever.getLast()
            .then(function(arrItems){
                $scope.articlesLoaded = arrItems;
                $scope.articles = $scope.articles.concat(arrItems);
            });

    $scope.applyFilter = function () {

        var contains = $scope.filters.text.split(' ');

        for (var idx in $scope.articles) {;
            $scope.articles[idx].isHidden = true;
            if (contains.length > 0) {
                for( var jdx in contains) {
                    if ($scope.articles[idx].body.toUpperCase().indexOf( contains[jdx] ) > -1)
                        $scope.articles[idx].isHidden = false;
                    if ($scope.articles[idx].title.toUpperCase().indexOf( contains[jdx] ) > -1)
                        $scope.articles[idx].isHidden = false;
                }
            }
        }
    };

});

但是当我在输入中添加一些文字时，$scope.articles上的修改并没有隐藏 article / views / article.html 中文章的div。有人可以解释原因，并可以给我一个解决方案吗？

谢谢： - ）

Answer 1

我的不好，搜索表单不在ng-controller="ArticleCtrl"指令的div中，我把它移到里面，现在一切都很完美。

AngularJS：交互式搜索

1 个答案: