how do I retrieve an input variable onto a javascript controller in angular?

Question

I have a search input field and i am trying to send that input to a JavaScript variable that i'd like to use. this is in Angular

input

<input ng-model="searchText" placeholder="Search">

controller.js

angular.module('searchkingApp')
  .controller('MainCtrl', function($scope){
//which code can i put under here?

//and end up having 

var searchedItem = //the string I have searched for..

I have the JavaScript file located in a different place from the HTML file.

Thanks alot in advance.

Any specific reason, why you want to access the variable in javascript outside of angular app? or is it with in the angular App but from a different controller or something — Sreekanth
– Sreekanth, Commented Nov 5, 2016 at 17:33
I want to perform a search on the github repository of which i can do with a hard coded variable. But now i'm trying to do a search and struggling to get the variable to the JavaScript file in order to use it. it's suppose to be a simple search but i'm missing something. — kuhle
– kuhle, Commented Nov 5, 2016 at 17:40
you just use $scope.searchText in your controller to access the value. — Sreekanth
– Sreekanth, Commented Nov 5, 2016 at 17:48
it's like using an input in an HTML form then pushing that "string" or inserted item into another page to use it there. I can do it in PHP. But angular has that $scope thing in the .controller and i get lost there. — kuhle
– kuhle, Commented Nov 5, 2016 at 17:51
I understand now. I was confused when you meant javascript variable in a different file. Its a simple thing. You could use the answer I have for reference — Sreekanth
– Sreekanth, Commented Nov 5, 2016 at 17:53

Sreekanth · Accepted Answer · 2016-11-05 17:51:34Z

1

You could do something like this.

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.searchText = "Hello";
    $scope.search = function() {
      console.log($scope.searchText);
    }
  }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <input ng-model="searchText" />
    <button ng-click="search()">Search</button>
  </div>
</div>

answered Nov 5, 2016 at 17:51

Sreekanth

3,13014 silver badges22 bronze badges

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

Comments

Yosvel Quintero · Accepted Answer · 2016-11-05 18:11:53Z

You can implement your logic to search on Github within the AngularJS App.

Inside searchOnGithub() method you can use $http to call your PHP script passing the value of the variable $scope.searchText and then show the result in the view.

Hope this helps to start:

angular
  .module('myApp', [])
  .controller('myController', function ($scope) {
    $scope.searchOnGithub = function() {
      // Do your logic to perform the search on Github
      console.clear();
      console.log($scope.searchText);
    };
  });

<script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <input type="text" ng-model="searchText" ng-change="searchOnGithub()" placeholder="Search">
</div>

Matías Fidemraizer · Accepted Answer · 2016-11-06 17:38:16Z

Your code is fine. Either if you manually add a searchText property to $scope or you just rely on ng-model="searchText" (this also automatically adds a property to $scope), your controller will access bound <input> value using $scope.searchText:

angular.module('searchkingApp')
  .controller('MainCtrl', function($scope){
       var searchedItem = $scope.searchText;
  });

Now you can either do an action when users performs some event (for example, a click event) or watch $scope.searchText for changes:

<input type="text" ng-click="search()">

$scope.search = function() {
    // $scope.searchText will give the search terms
};

...or:

// You would go this way if you want to implement something like 
// Google Instant Search so you don't need to click anything, you perform
// searches whenever the <input> changes
$scope.$watch(function() { return $scope.searchText; }, function(newValue, oldValue) {
    // newValue contains current $scope.searchText value
});

Collectives™ on Stack Overflow

how do I retrieve an input variable onto a javascript controller in angular?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related