How to pass value from a textbox to a function in AngularJs?

Question

My HTML:

<input type ="text" ng-model="contactid" >

I want to pass the contactId value entered in this box to a function abc() which is called onclick of submit button after the box.

How do I do this?

put ng-model on the tetbox than use this variable in the function — AranS
– AranS, Commented Jun 22, 2016 at 10:59
Angular has model, view and controller. Bind model to view and use model data in controller in submit handler. angularjs.org — Sharikov Vladislav
– Sharikov Vladislav, Commented Jun 22, 2016 at 11:01
I think you should start with angular documentation as a basic... — AranS
– AranS, Commented Jun 22, 2016 at 11:02
Bind your input element with Angular modal with ng-bind or ng-model — Manwal
– Manwal, Commented Jun 22, 2016 at 11:06

pgrodrigues · Accepted Answer · 2016-06-22 11:07:09Z

8

You can do it like so:

<form ng-controller="formCtrl">     
    <input type="text" name="name" ng-model="inputValue" />
    <button ng-click="abc(inputValue)"></button>
</form>

Or using ng-submit directive:

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

And in your formCtrl controller:

.controller('formCtrl', function () {
    $scope.inputValue = null;
    $scope.abc = function (value) {
        console.log(value);
    };
});

answered Jun 22, 2016 at 11:07

pgrodrigues

2,0781 gold badge25 silver badges30 bronze badges

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

2 Comments

Vishal Mahuli Over a year ago

Could you also help me to solve this error i am getting:angular.js:12520 TypeError: Cannot read property 'get' of undefined at r.$scope.contactId (Index.html?name=3-1749:18) at fn (eval at compile (angular.js:13365), <anonymous>:4:329) at e (angular.js:23613) at r.$eval (angular.js:16052) at r.$apply (angular.js:16152) at HTMLButtonElement.<anonymous> (angular.js:23618) at If (angular.js:3346) at HTMLButtonElement.d (angular.js:3334)

pgrodrigues Over a year ago

You should open a new question. When doing so, besides showing the error, show also the code which gives the error.

Collectives™ on Stack Overflow

How to pass value from a textbox to a function in AngularJs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related