How to get value of ng-Model into Controller angular js

Question

Please help me to check this part of code.

<body ng-app = "myApp">
<h1>FORM </h1>
    <div ng-controller="myController">
    <p><label>Username : </label><input type="text" ng-model="user.username" name="username" id="username" /></p>
    <p><label>Email : </label><input type="email" ng-model="user.email"/></p>
    <p><label>Verifikasi Email : </label><input type="email" ng-model="user.verify_email"  /></p>
    <p><label>Password : </label><input type="password"  ng-model="user.password" id="password" /></p>
    <button type="button" ng-click = "add()"  >Sig In</button>
</div>
</body>

In my Javascript:

<script>
var app = angular.module('myApp', []);
    app.controller("myController", function($scope){
$scope.user = {};
$scope.add = function(){
     $scope.data = [
                    { nama : $scope.user.username},
                    { email : $scope.user.email},
                    {password : $scope.user.password } ];
console.log($scope.data);
    }               
 });

Thanks for you all. I already update my script. When I click the button, the console didn't print the data. Why? I think there is something wrong.

Try to define the user object before referencing it, like $scope.user = {} ; $scope.data = ... — Jeremy Thille
– Jeremy Thille, Commented Dec 23, 2015 at 8:15
Thats because you have written user.username, but $scope.user is not defined. — Rajesh Dixit
– Rajesh Dixit, Commented Dec 23, 2015 at 8:16
I think you should read about angular tutorials and ap docs .Please Check out docs.angularjs.org/guide/controller — furkankatman
– furkankatman, Commented Dec 23, 2015 at 8:16
Thanks. I try like what you said. I already update it. Can you check it again? — dede
– dede, Commented Dec 23, 2015 at 8:49

Anik Islam Abhi · Accepted Answer · 2015-12-23 08:21:17Z

7

You didn't define user

But that shouldn't be the problem if you use only user as model like

<input type="text" ng-model="user" name="username" id="username" />

It'll be added as property in the scope without any worries.

But you have added property username in user.

As user is undefined so the scenario will be undefined.username which is not permitted.

Try to defined user as object then any property will automically added.

Like this

$scope.user={};

answered Dec 23, 2015 at 8:21

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

Comments

M. Hanafi · Accepted Answer · 2017-06-14 11:39:20Z

in your HTML you should

<body ng-app = "myApp"> 

    <div ng-controller="myController">
        <p><label>Username : </label><input type="text" ng-model="user.username" name="username" id="username" /></p>
        <p><label>Email : </label><input type="email" ng-model="user.email"/></p>
        <p><label>Verifikasi Email : </label><input type="email" ng-model="user.verify_email"  /></p>
        <p><label>Password : </label><input type="password"  ng-model="user.password" id="password" /></p>
        <button type="button" ng-click = "add(user)"  >Sig In</button> 
    </div> 

</body>

in case of

ng-click = "add()"

use

ng-click = "add(user)"

in your controller

$scope.add = function(user){

    $scope.data = [
        { name : user.username},
        { email : user.email},
        {password : user.password } 
    ];

    console.log($scope.data);

}); // End add Function

Collectives™ on Stack Overflow

How to get value of ng-Model into Controller angular js

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related