Question

我正在尝试使用Angular创建一个应用程序，允许用户搜索电影标题，应用程序应该显示与该搜索项目相对应的所有结果。

我创建了一个向tmdb数据库发出JSON请求的控制器，在我的视图中，我显示了该请求的所有标题。

问题是我无法获得用户输入来进行搜索。在我的控制器中，我创建了一个名为searchquery的变量。如果我将值设置为var searchquery = "james bond"，然后访问应用程序，控制器会向tmdb数据库发出JSON请求并要求所有“james bond”标题，然后在我的首页上显示所有标题。

所以我的问题是如何使用用户输入来更改该变量，以便用户可以搜索其他标题？

在我的范围内，我有一个名为search的变量，它插入一个名为searchquery的变量。我想编辑searchquery的值，以便搜索用户的输入。

控制器，

angular.module('app.exampleApp').controller('exampleCtrl', [

  '$scope', '$http', function($scope, $http) {
    var base = 'http://api.themoviedb.org/3';
    var service = '/search/movie';
    var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
    var search = [searchquery]
    var callback = 'JSON_CALLBACK'; // provided by angular.js
    var url = base + service + '?api_key=' + apiKey + search + '&callback=' + callback;

    $scope.movieList = ["Searching ..."];

    $http.jsonp(url).
      success(function (data, status, headers, config) {

        if (status == 200) {
          $scope.movieList = data.results;
          console.log($scope.movieList)
        } else {
          console.error('Error happened while getting the movie list.')
        }

      }).
      error(function (data, status, headers, config) {
        console.error('Error happened while getting the movie list.')
      });
    }
]);

var searchquery = document.getElementById('searchquery');
console.log(searchquery)

节目，

%h1
  Logo
%li
  = link_to('Logout', destroy_user_session_path, :method => :delete)

#search{"ng-app" => "app.exampleApp"}
  %input{"ng-model" => "message", :type => "text", :id => "searchquery"}
  %p {{ message }}

  %div{"ng-controller" => "exampleCtrl"}
    %div{"ng-repeat" => "movie in movieList"}
      {{ movie.original_title }}

我有一个名为searchquery的id的输入，此输入应放在控制器的变量search中，以便将JSON请求更改为用户的输入。

我想也许我可以找到元素的输入（输入）并将其存储在变量中。但控制台日志输出nill。

这也只是JS而不是Angular，而且我认为还有一种Angular方法可以解决这个问题。

Answer 1

如果要在文本框中访问用户输入的值，则必须使用控制器内的Input元素，因为您要使用用户的输入值来搜索电影。

要访问控制器内部的值，变量名称需要包含在input元素的ng-model属性中。

%input{"ng-model" => "searchquery", :type => "text", :id => "searchquery"}

在控制器中使用

$scope.searchquery = ''; // to initialize (optional)

每当用户输入任何值时，都会更新$ scope.searchquery变量。使用相同的值来查询电影。

console.log('user input : ' + $scope.searchquery); // shows the value type by user

由于

用户输入更新变量

1 个答案: