0

免责声明我来自淘汰赛，所以我在改变如何做某些事情的思路时遇到了一些麻烦，这就是其中之一......

我有<input>一个用户可以在其中输入电影标题，并且应该显示电影列表。电影集合是通过调用从我的 rest api 提供的http://www.example.com/api/movies?title=matrix。该 api 包装在一个角度资源模块中。

我认为这$scope.movies = Movie.query({ title: $scope.searchValue });会在任何时候更改时自动更新，$scope.searchValue但它似乎并没有那样工作。

angular.module('robotdog.resources', ['ngResource'])
    .factory('Movie', function($resource){
        return $resource('/api/movies/:id');
    });

robotdog.controller('HomeController', function($scope, Movie){
    $scope.movies = Movie.query({ title: $scope.searchValue });

});

只是为了完整起见，这里是我对这个特定控制器的标记......

<input type="text" ng-model="searchValue" placeholder="Search Movie Title"/>
<pre>{{ movies | json }}</pre>

$scope.movies用户在 中输入值后填充搜索结果的正确方法是<input>什么？

4

2 回答 2

3

当控制器初始化时，您只调用 Movie.query 一次。您需要添加一个函数来调用 Movie.query，并在 searchValue 更改时使用它：

<input type="text" ng-model="searchValue" ng-change="getMovies" placeholder="Search Movie Title"/>


robotdog.controller('HomeController', function($scope, Movie) {
    $scope.getMovies = function() {
      $scope.movies = Movie.query({ title: $scope.searchValue });
    }
});

每当用户更改输入时（即在按键上），这将调用您的 REST api，因此如果这导致过多的 RPC，您可能需要添加一个“搜索”按钮，并且仅在它被击中时发出 RPC：

<input type="text" ng-model="searchValue"/>
<button ng-click="getMovies">Go</button>
于 2013-05-03T17:48:15.377 回答
0

或者您可以尝试：

<input type="text" ng-model="searchValue" />
<p ng-repeat="movie in movies | filter: searchValue">{{ movie }}</p>

控制器中不需要 JS，除了基本查询：

$scope.movies = Movie.query();

查看小提琴：http: //jsfiddle.net/euan/zuhga76c/

于 2014-09-01T12:34:53.070 回答