How to get the value of an input box using angular

Question

function DefaultController($scope, navBarService) {
    var vm = this;

    $scope.toggleHeader = true;
    $scope.userNameNav ='';
    //Sharing info with other controllers
    $scope.$on('toggleHeader', function(evt, data) {
        $scope.toggleHeader = data;
    });

    $scope.$on('changeName', function(evt, data) {
        $scope.userNameNav = data;
    });


    $scope.searchForItem = function() {
        console.log('button clicked');
        console.log($scope.userSearch);

    };

}//end DefaultController

.Navigation {


    width:100%;
    height:25em;
    background-image: url('http://wallpapercave.com/wp/UYnUUzz.jpg');
    background-size: cover;
background-position:50% 50%;
position: sticky;

}

.navContent {
    float:right;
}

.searchNav {

    border: 0;
    border-bottom: 1px solid red;
    outline: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Rental app</title>
        <link rel="stylesheet" href="styles/userPage.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="vendors/angular.min.js" charset="utf-8"></script>
        <script src="vendors/angular-route.min.js" charset="utf-8"></script>
        <script src="scripts/controllers/defaultController.js" charset="utf-8"></script>
        <script src="scripts/controllers/RegisterController.js" charset="utf-8"></script>
        <script src="scripts/controllers/LoginController.js" charset="utf-8"></script>
        <script src="scripts/controllers/userController.js" charset="utf-8"></script>
        <script src="scripts/client.js" charset="utf-8"></script>
        <script src="scripts/services/credentialsService.js" charset="utf-8"></script>
        <script src="scripts/services/navBarService.js" charset="utf-8"></script>
        <script src="scripts/services/addItemSerivce.js" charset="utf-8"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.min.js" charset="utf-8"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
        <link rel="stylesheet" href="styles/register.css">
        <link rel="stylesheet" href="styles/style.css">
    </head>
    <body ng-app='myApp'>
        <div class="" ng-controller='DefaultController'>
            <div class="navImage">


            <div class="Navigation" ng-if='toggleHeader'>
                <div class="navContent">
                    <a href="http://localhost:7138/#!/login">Logout</a>
                    <input class='searchNav' type="button" name="button" value="Search" ng-click='searchForItem()' >
                    <input id='getUserInput' type="text"  placeholder="Search Item" ng-model='userSearch'/>{{ userSearch }}

                </div>

                <h1 class='greetUser'>Welcome {{userNameNav}}</h1>

            </div>
            </div>
            <ng-view></ng-view>
        </div>

    </body>
</html>

In the html file i want to get the value of the users search when i click the search button. I am able to get a console log of 'button clicked', but i can not get the value of the search box. I tried using vm too, but that didnt work so i took it out

don't know whats wrong is going on with $scope, but you are using the instance of controller, so in your html template write `ng-controller='DefaultController as ctrl' and then use `ctrl.userSearch`, and in your javascript, use `vm.userSearch` — Koushik Chatterjee, Jul 07 '17 at 20:00
It should be `$scope.userSearch;` but you also need to define it at the beginning, like below ` $scope.userNameNav ='';` — Hackerman, Jul 07 '17 at 20:01
`$scope.userSearch` the value for the `ng-model` directive is the name of the variable on its controller's scope, note there are issues with [naming with models](https://stackoverflow.com/questions/18128323/if-you-are-not-using-a-dot-in-your-angularjs-models-you-are-doing-it-wrong) — Patrick Barr, Jul 07 '17 at 20:01
Your problem is connected with lack of object initialization. You shoud declare: `$scope.formData = {};` before. Check my answer below. It's work in plnkr properly. — kris_IV, Jul 07 '17 at 20:30

kris_IV · Accepted Answer · 2017-07-07T20:28:48.897

You should declare your variable in controller before you put it in model. You can write: $scope.formData = {}; and use this object in HTML and JS.

Use this version:

function DefaultController($scope, navBarService) {
    var vm = this;

    $scope.toggleHeader = true;
    $scope.userNameNav ='';
$scope.formData = {};
    //Sharing info with other controllers
    $scope.$on('toggleHeader', function(evt, data) {
        $scope.toggleHeader = data;
    });

    $scope.$on('changeName', function(evt, data) {
        $scope.userNameNav = data;
    });


    $scope.searchForItem = function() {
        console.log('button clicked');
        console.log($scope.formData.userSearch);

    };

}//end DefaultController

And in your template:

<input id='getUserInput' type="text"  placeholder="Search Item" ng-model='formData.userSearch'/>{{ formData.userSearch }}

How to get the value of an input box using angular

1 Answers1