Question

免责声明我来自淘汰赛，所以我在如何处理某些事情时遇到了一些麻烦，这就是其中之一... < / p>

我有<input>用户可以输入电影标题，并且应该显示电影列表。电影收集是通过致电http://www.example.com/api/movies?title=matrix从我的休息api提供的。 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>的正确方法是什么？

Answer 1

初始化控制器时，您只调用一次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>

Answer 2

或者您可以尝试：

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

使用资源填充Angularjs中的scope属性

2 个答案: