使用过滤器工作的AngularJS搜索

时间:2016-03-06 10:50:35

标签: javascript angularjs

我正在尝试使用angularjs过滤器方法进行搜索,但它无法正常工作。我没有在控制台中收到任何错误,但仍然没有显示搜索结果。有人可以帮我这个。

这是我的controller.js代码:

.controller('SearchController', 
            [  
                '$scope', 
                'dataService', 
                '$location',
                '$routeParams',

                function ($scope, dataService, $location, $routeParams){
                    $scope.searchMovies = [ ];
                    $scope.searchCount = 0;

                    var getSearchResult = function (terms) {
                        dataService.getSearchResult(terms).then(
                            function (response) {
                                $scope.searchCount = response.rowCount + ' movies';
                                $scope.searchMovies = response.data;
                                $scope.showSuccessMessage = true;
                                $scope.successMessage = "All movie Success";
                            },
                            function (err){
                                $scope.status = 'Unable to load data ' + err;
                            }
                        );  // end of getStudents().then
                    };
                    if ($routeParams && $routeParams.term) {
                        console.log($routeParams.term);
                        getSearchResult($routeParams.term);
                    }

                }
            ]
        );

这是services.js代码:

this.getSearchResult = function (terms) {
            var defer = $q.defer(),
            data = {
                action: 'search',
                term: terms
            }
            $http.get(urlBase, {params: data, cache: true}).
                    success(function(response){
                        defer.resolve({
                            data: response.ResultSet.Result,
                            rowCount: response.RowCount
                        });
                    }).
                    error(function(err){
                        defer.reject(err);
                    });
            return defer.promise;
        };

这是我的app.js代码:

. when('/search', {
   templateUrl : 'js/partials/search.html',
   controller : 'SearchController'
}).

这是search.html代码:

<div>
<label>Search: <input ng-model="searchMovie"></label><br><br><br><br>
</div>
<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Category</th>       
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="search in searchMovies | filter:searchMovie">
            <td>
                {{search.title}}
            </td>
            <td>
                {{search.description}}
            </td>
            <td>
                {{search.name}}
            </td>
        </tr>   
    </tbody>
</table>

正在从数据库中检索搜索数据。我测试了SQL,它工作正常。只是你的问题是在angularjs服务器端。谢谢。

1 个答案:

答案 0 :(得分:0)

您需要在app.js文件中为控制器提供Alias

 .when('/search', {
  templateUrl : 'js/partials/search.html',
  controller : 'SearchController'
  controllerAs: 'movies',
  });

现在,在您的search.html文件中传递controllerAs

<div>
<label>Search: <input ng-model="searchMovie"></label><br><br><br><br>
</div>
<table class="table table-hover table-bordered">
<thead>
    <tr>
        <th>Title</th>
        <th>Description</th>
        <th>Category</th>       
    </tr>
</thead>
<tbody>
    <tr ng-repeat="search in searchMovies | filter:searchMovie">
        <td>
            {{movies.search.title}}
        </td>
        <td>
            {{movies.search.description}}
        </td>
        <td>
            {{movies.search.name}}
        </td>
    </tr>   
</tbody>