javascript - 使用过滤器的 AngularJS 搜索不起作用

Question

我正在尝试使用 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 服务器端。谢谢。

Answer 1

您需要在 app.js 文件中为 Controller 指定别名

 .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>