Обновление переменной с пользовательским вводом

Question

Я пытаюсь создать приложение, использующее Angular, что позволяет пользователю искать название фильма, и приложение должно показывать все результаты, связанные с этим поисковым сервером.

Я создал контроллер, который выполняет запрос JSON в базу данных tmdb, и, на мой взгляд, я показываю все заголовки из этого запроса.

Проблема в том, что я не могу получить вход пользователя для выполнения поиска. В моем контроллере я создал переменную под названием searchquery. Если я установил значение var searchquery = "james bond", а затем посетил приложение, контроллер выполнит запрос JSON в базу данных tmdb и запросит все названия «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 этот вход должен быть помещен в переменной search в контроллере, так что изменяет Запрос JSON на вход пользователя.

Я думал, может быть, я могу найти вход элемента (вход) и сохранить его в переменной. Но консольный журнал выводит nill.

Также это только JS, а не Angular, и я думаю, что есть угловой способ решить эту проблему.

Answer 1

Если вы хотите получить доступ к введенному пользователем значению в текстовом поле, вам необходимо использовать элемент ввода внутри контроллера, так как вы хотите использовать входное значение пользователя для поиска фильма.

Чтобы получить доступ к значению внутри контроллера, имя переменной должно быть включено в атрибут 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 

Благодаря