javascript - 使用用户输入更新变量

Question

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

我创建了一个 Controller ，它向 tmdb 数据库发出 JSON 请求，在我看来，我显示了该请求中的所有标题。

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

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

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

Controller ，

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

我有一个 ID 为 searchquery 的输入该输入应放置在变量 search 中在 Controller 中，因此它将 JSON 请求更改为用户的输入。

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

另外，这只是 JS，而不是 Angular，我认为 Angular 也可以解决这个问题。

Answer 1

如果您想访问用户在文本框中输入的值，那么您必须使用 Controller 内的 Input 元素，因为您想使用用户的输入值来搜索电影。

要访问 Controller 内的值，变量名称需要包含在输入元素的 ng-model 属性中。

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

并在 Controller 中使用

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

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

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

谢谢