How do I get an input value into Angular's $scope?

Question

I'm new to Angular, and I am trying to do something really basic. Here is a part of a view (all angular files are added elsewhere) :

 <div ng-controller='ctrl'>
    <input type='text' ng-model='id'>
 </div>

And here is my controller :

 module.controller('ctrl',['$scope', function ($scope) {

    // get the scope value here
}]);

What I'm trying to do is really simple. I'd like to use the input value. I tried something like $scope.data = [] and $scope.data.push($scope.id) to create an array with the scope's value, but it didn't work. When I tried to display the value, I got an 'undefined' on the console.

Do you guys have any idea ?

Edit : The view also has a button with the ng-click directive which trigger the controller's function where I try to get my value.

I type something, and (I didn't write it on the original post) I have a button, with an `ng-click` directive linked to a function in the controller. — Arhyaa, Jun 01 '15 at 15:35
Edit the title of the question so that it states the problem you're facing, "Just trying to do some basic stuff with AngularJS's ngModel" tells me nothing. You wouldn't ask your parent "I'm trying to do some cooking with a stove" ... "okay, what's the question? What are you cooking? What's the problem?". — Jonast92, Jun 01 '15 at 15:35
I would add the `ng-click` to the question. Post the code "as-is" - not a close representation... little errors can looks like big problems. — tymeJV, Jun 01 '15 at 15:42
Check my blog post. It could be useful for you: http://www.espeo.pl/angularjs-how-properly-use-watch-and-watchcollection/ — ssuperczynski, Jun 01 '15 at 19:44

score 19 · Accepted Answer · answered Jun 01 '15 at 15:30

19

The value will automatically be added to the $scope, but you have to type something into the input element.

That said, you need to trigger something to get this value. For example, where you have your comment // get the scope value here -- this is triggered as soon as the controller is initialized and never called again; so, it's going to log undefined at that time. However, if you set it to a button click, or something, you will see it's available:

<div ng-controller='ctrl'>
   <input type='text' ng-model='id'>
   <button ng-click="logId()">Log ID</button>
</div>

And your controller:

module.controller('ctrl',['$scope', function ($scope) {
    $scope.logId = function() {
        console.log($scope.id);
    }
}]);

Now type something into the input and click the button.

answered Jun 01 '15 at 15:30

Tom

7,640
1
23
47

Hmm, my bad, I forgot to mention it. I have a button on the view, with an `ng-click` directive linked to a function in the controller to trigger it. I'll add it to the original post ! – Arhyaa Jun 01 '15 at 15:37
Can you provide a [jsBin](http://jsbin.com) or [jsFiddle](http://jsfiddle.net) that doesn't work? The code I provided works fine: http://jsbin.com/wuhiciwibi/1/edit?html,js,console,output @Arhyaa – Tom Jun 01 '15 at 15:40
I switch from `angular.min.js` to `angular.js` in the main view, and it worked. – Arhyaa Jun 02 '15 at 07:09

score 1 · Answer 2 · answered Jun 01 '15 at 15:34

If you really need it in array, just do this in your controller:

$scope.data = [0];

and in HTML do <input type="text" ng-model="data[0]">

It will fill that array value automaticaly as you type something in INPUT, id will be always at first position in array.

Or you can handle it with object In controller: $scope.data = {};

in HTML <input type="text" ng-model="data.id">

How do I get an input value into Angular's $scope?

2 Answers2

Linked

Related