angularjs fetch value from textbox after clicking a button only

Question

This is my code

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script>
        var myApp = angular.module('myApp', []);
        myApp.controller('myController', function ($scope) {

            $scope.getName = function () {
                $scope.name = fname;
                $scope.lastName = lastName;
            };

        })
    </script>
</head>
<body ng-app="myApp" >
    <div >
        <input type="text" ng-model="name"/> <br>
        <input type="text" ng-model="lastName" />
    </div>
    <div ng-controller="myController">
        <input type="button" value="click" ng-click="getName()" />
        <br>
        Hello FirstName {{name}}<br>
        Last Name {{lastName}}

</div>
</body>
</html>

values are coming while typing into textbox but i want values only after clicking the button.Please help me.
I tried in both ways simple as well as by using service or factory method but no success

Bahadir Tasdemir · Accepted Answer · 2017-02-17 07:47:37Z

1

You must separate the ng-models of the input texts and destination field. They are updating real-time because of having the same models.

I have created the correct version for you:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script>
        var myApp = angular.module('myApp', []);
        myApp.controller('myController', function ($scope) {

            $scope.getName = function () {
                $scope.nameToSet = $scope.name;
                $scope.lastNameToSet = $scope.lastName;
            };

        })
    </script>
</head>
<body ng-app="myApp" >
    <div >
        <input type="text" ng-model="name"/> <br>
        <input type="text" ng-model="lastName" />
    </div>
    <div ng-controller="myController">
        <input type="button" value="click" ng-click="getName()" />
        <br>
        Hello FirstName {{nameToSet}}<br>
        Last Name {{lastNameToSet}}

</div>
</body>
</html>

UPDATE: Here is another version with using a factory:

    var myApp = angular.module('myApp', []);
    myApp.factory('container', function() {
        var model = {
          name: '',
          lastName: ''
        };
        return {
          model: model,
          setName: function(nameToSet) {
            model.name = nameToSet;
          },
          setLastName: function(lastNameToSet) {
            model.lastName = lastNameToSet;
          }
        };
    });
    myApp.controller('myController', function ($scope, container) {
        $scope.$watch('name', function(newvalue,oldvalue) {
          container.setName(newvalue);
        });
        $scope.$watch('lastName', function(newvalue,oldvalue) {
          container.setLastName(newvalue);
        });
        $scope.onNameType = function(value) {
          container.setName(value);
        };
        $scope.onLastNameType = function(value) {
          container.setLastName(value);
        };
        $scope.getName = function () {
            debugger;
            $scope.nameToSet = container.model.name;
            $scope.lastNameToSet = container.model.lastName;
        };
    })

    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    </head>
    <body ng-app="myApp" >
        <div >
            <input type="text" ng-model="name" ng-change="onNameType(name)"/> <br>
            <input type="text" ng-model="lastName" ng-change="onLastNameType(lastName)" />
        </div>
        <div ng-controller="myController">
            <input type="button" value="click" ng-click="getName()" />
            <br>
            Hello FirstName {{nameToSet}}<br>
            Last Name {{lastNameToSet}}

    </div>
    </body>
    </html>

edited Feb 17, 2017 at 7:47

answered Feb 17, 2017 at 7:19

Bahadir Tasdemir

10.9k4 gold badges54 silver badges63 bronze badges

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

3 Comments

ishan Over a year ago

As I am new please guide me to how to achieve same thing using service or factory

Bahadir Tasdemir Over a year ago

Ok I will update the answer, please don't forget to mark as the correct answer

Bahadir Tasdemir Over a year ago

working for me, check the second sample, I see the same thing is provided when I click on the button?

Collectives™ on Stack Overflow

angularjs fetch value from textbox after clicking a button only

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related