How can I take a input value and put into a variable in angularJS?

Question

How can I take a input value and put into a variable in angularJS? this is the working testing version on my page but I did javascript and jquery together with angularJS to make it work but it is still giving me errors. I know there must be a way to take the input value and put it inside of a var value through angularJS with out writting it manually how I'm doing it.

http://www.jaysg.com/poster

index.html

<div class="header">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">

                        <h1>Find That Poster</h1>

                        <div class="searchbox">
                            <button ng-click="start()" class="searchButton" id="btnSearch" value="Search">Search</button>
                            <p></p>
                        <input onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()">

                        </div>

                    </div>
                </div>
            </div>

      </div>




      <div class="content" ng-controller="StoreController as store">
        <div class="container"> 
        <div class="row">
      <div >

        <div class="col-md-3 posterImg" ng-repeat="product in store.products.results">

                    <span><img ng-src="http://image.tmdb.org/t/p/w300{{product.poster_path}}" class="img-responsive"></span>

                    <div >

              <!-- <h2> {{product.original_title}}</h2>-->




                </div>




      </div>


      </div>
      </div>


            </div>

            </div>
      </div>


            </div>

app.js // angular

(function() {
    var app = angular.module('store', ['store-products']);//main app ng-app

    app.controller('StoreController',[ '$http', function($http){

        var store = this;

        store.products = [ ];

        $(document).ready(function() {
            $( "input" ).keyup(function() {
                    var value = $( this ).val();




            $('button').click(function() {

        $http.get("http://api.themoviedb.org/3/search/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&query=" + value ).success(function(data){

            store.products = data;

        });

    });
                 })
                  .keyup();
        });

                          }]);


    })();

David Frank · Accepted Answer · 2015-01-10 23:05:13Z

2

You need the ng-model attribute.

Example:

<input onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()" ng-model="search">

Then you can access the variable using $scope.search.

As I can see you are currently not injecting the $scope. This is how to do it:

app.controller('StoreController', ['$scope', '$http', function($scope, $http){

See more in the docs.

It would also be advisable to rewrite your jquery event handlers to angular event handlers. So instead of $('button').click(function() {, create a $scope.start() function that is bound to the click event of the search button.

answered Jan 10, 2015 at 23:05

David Frank

6,0928 gold badges30 silver badges43 bronze badges

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

Comments

Ganesh Yadav · Accepted Answer · 2016-04-11 11:36:58Z

0

to get the value of the variable use ng-model and to listen for the key down use ng-keydown

<div class="searchbox">
   <button ng-click="search()" class="searchButton" id="btnSearch" value="Search">Search</button>
      <p>
      </p>
      <input ng-keydown="press($event)" ng-model="searchField" >   
 </div>

and in your controller you call the functions you just bound to your dom elements

app.controller('StoreController', [
'$scope',
'$http',
function ($scope, $http) {
    $scope.press = function (e) {
        console.log(e.keyCode);
        if (e.keyCode == 13) {
            $scope.search();
        }
    };
     $scope.search = function (e) {
          $http.get("http://api.themoviedb.org/3/search/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&query=" + $scope.searchField )
           .success(function(data){

        $scope.products = data;

    });
    };

}
]);

edited Apr 11, 2016 at 11:36

Ganesh Yadav

2,6852 gold badges33 silver badges53 bronze badges

answered Jan 10, 2015 at 23:19

Radhouane Fazai

3421 silver badge6 bronze badges

5 Comments

Jayswager Over a year ago

I copied this into my code an it aint showing up any results of the search.. I guess its coded right because there's no errors but it's not working

Jayswager Over a year ago

OK>>> Got it working I needed to change the ng-repeat thank you

Jayswager Over a year ago

<div class="col-md-3 posterImg" ng-repeat="product in products.results"> <span><img ng-src="image.tmdb.org/t/p/w300{{product.poster_path}}" class="img-responsive"></span> <div >  </div> </div>

Radhouane Fazai Over a year ago

it is working , you can log the $scope.products in the controller and change your html markup accordingly

Jayswager Over a year ago

Yeah I got it working thank you!!! You the man !! I'm new to angular and for some reason I find the documentation hard to read and understand. It's not like Jquery which seems more easy to read and understand the examples without a computer science degree

Collectives™ on Stack Overflow

How can I take a input value and put into a variable in angularJS?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related