accessing angularjs textbox value in a controller

Question

I am trying to learn AngularJS and require help in passing user entered text box text value after button click to append to a string url value while calling the http service.

I'm trying to add in the following way but it is showing me a value of undefined while appending the URl with the user entered text from the text box.

Here is my HtmlPage1.html

 <form ng-submit="abc(inputValue)"> <input type="text" name="name" ng-model="inputValue" /> <button type="submit">Test</button> </form> 

and my script file Script.js

 var app = angular.module("repos", []) .controller("reposController", function ($scope, $http, $log) { $scope.inputValue = null; $scope.abc = function (value) { $scope.inputValue = value; }; $http({ method:'GET', url: 'https://api.github.com/users/'+$scope.inputValue+'/repos' }) .then(function (response) { $scope.repos = response.data; $log.info(response); }); }); 

Can anyone help me in this regard on how to get the right value that the user has entered to appended to the URL?

Thanks in advance.

Answer 1

Your get call is placed before you enter any value. In order to call the API with inputValue, place the get call inside the button click.

Also, you do not have to pass the inputValue into the function from HTML, Angular's 2 way binding will do the job for you.

Ex: HTML

<form ng-submit="abc()"> <input type="text" name="name" ng-model="inputValue" /> <button type="submit">Test</button> </form> 

JS:

 var app = angular.module("repos", []) .controller("reposController", function ($scope, $http, $log) { $scope.inputValue = null; $scope.abc = function () { $log.info($scope.inputValue) // you will have your updated value here $http({ method:'GET', url: 'https://api.github.com/users/'+$scope.inputValue+'/repos' }) .then(function (response) { $scope.repos = response.data; $log.info(response); }); }); }; 

I hope this helps.

Answer 2

Just remember that you have the code on your controller thanks to 2 way binding.

There you will set up an object for models. Ad later you can use them to submit data.

In order for you to understand what I am trying to explain I made an example, I hope it Helps

In your code:
Set the ng-model on the input tag

<input type="text" name="name" ng-model="vm.data.inputValue" /> 

On your controller make it available as in my example

 vm.data ={}; 

Then use a function to send it using ng-click.

<button type="submit" ng-click="vm.submit()">Test</button> 

I am sure there are more ways to do this.

I am not that good, explaining so I made an example, that I hope helps: https://jsfiddle.net/moplin/r0vda86d/

• my example is basically the same but I prefer not to use $scope.