Update variable with user input

Question

I'm trying to create a app using Angular that allowes user to search for a movie title and the app should show all the results corrosponding to that searchterm.

I've created a controller that does a JSON request to the tmdb database and in my view I show all the titles from that request.

The problem is that I can't get the user input to do the search. In my controller I've created a variable called searchquery. If I set the value to var searchquery = "james bond" and then visit the app the the controller does a JSON request to the tmdb database and asks for all "james bond" titles and then shows all the titles on my frontpage.

So my question is how can I use the user input to change that variable so the user can search for other titles?

In my scope I have a variable called search which inserts a variable called searchquery. I want to edit the value of searchquery so it searches the input of the user.

The 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)

And the show,

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

I have a input with an id called searchquery this input should be placed in the variable search in the controller so it changes the JSON request to the input of the user.

I thought maybe I can find the input of the element (the input) and store it in the variable. But the console log outputs nill.

Also this is just JS and not Angular, and I'm thinking there's an Angular way to solve this problem as well.

Tried reading your problem twice and couldn't wrap my head around what you are interested in solving? Please clarify your question. Thanks — Itamar L.
– Itamar L., Commented Aug 4, 2015 at 9:48
@ItamarL. I've added more context to the question. Hope it's more clear now. Basicly what I'm trying to do is change the value of a variable in my controller so the controller does a request with the users input. — Peter Boomsma
– Peter Boomsma, Commented Aug 4, 2015 at 10:01
You have already added an ng-model to your input field: "ng-model" => "message". You can access this as $scope.message inside your controller. — Itamar L.
– Itamar L., Commented Aug 4, 2015 at 10:05
@ItamarL. I've tried putting var search = $scope.searchquery = ''; into my controller but when I type in my input field nothing happens. Also console.log('user input : ' + $scope.searchquery); // only shows user input : So the scope.searchquery in the controller doesn't get the input from the field. — Peter Boomsma
– Peter Boomsma, Commented Aug 4, 2015 at 11:04

Lakhan Kriplani · Accepted Answer · 2015-08-04 10:01:58Z

1

If you want to access the value input by the user in text box then you have to use Input element inside the controller as you want to use the user's input value to search movie.

To access the value inside the controller the variable name need to be included in ng-model attribute of input element.

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

And in the controller use

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

Whenever user input any value the $scope.searchquery variable is updated. use to same value to query the movie.

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

Thanks

answered Aug 4, 2015 at 10:01

Lakhan Kriplani

4723 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Peter Boomsma Over a year ago

How do I use $scope.searchquery = ''; to insert the input value into my variable though?

Lakhan Kriplani Over a year ago

When we use ng-model directive it will automatically get the value of input elements in the controller, and can be accessed by using the same variable name used in ng-model. refer this : docs.angularjs.org/api/ng/directive/ngModel

Peter Boomsma Over a year ago

I've created a CodePen with the problem I'm having. codepen.io/alucardu/pen/XbOWRP if you type in the input field it doesn't show it in the console

Collectives™ on Stack Overflow

Update variable with user input

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related