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.