AngularJS two way data binding not working

Question

I am having trouble with two way data binding, I fetch an array of objects from the controller and when I make another request trying to submit part of the data, It goes back and is undefined in the controller when I use console.log, The app uses AngularJS 1.5.8 and angular-route Can someone please help me figure out why the console.log in the register scope function logs undefined instead of the names. The code My index file:

<!DOCTYPE html>
<html>
<head>  
<script type="text/javascript" 
    src='lib/angular.min.js'></script> 
<script type="text/javascript" src='lib/angular-route.js'>  </script>
<script type="text/javascript" src='app.js'></script>
<script type="text/javascript" src='controllers.js'></script>
<title></title>
</head>
<body ng-app='myApp'>
<div ng-view>

</div>

</body>
</html>


The partial I am using is home.html:

<section ng-controller='MyCtrl'>
{{test}}
<form>
<input type="text" name="test" ng-model='post'>
<input type="submit" name="sub" value="post" ng-click='getdata()'>
</form>
<table ng-repeat='i in list'>
<tr>
<td>{{i.name}}</td>
<td>{{i.job}}</td>
<form>
<input type="text" 
    name="regname" value='{{i.name}}'   \ng-model='{{i.name}}' hidden>
<td><input type="submit" name="sub2" ng-click='register()'></td>
</form>
</tr>
 </table>
</section>

The app is declared in app.js:
(function () {
// body...
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl: 'home.html',
        controller: 'MyCtrl'
    }).when('/home', {
        templateUrl: 'home.html',
        controller: 'MyCtrl'
    })
   })();

The controller code is in controllers.js:
var app = angular.module('myApp');
app.controller('MyCtrl', 
    ['$scope', '$http', function ($scope, $http) {
// body...
$scope.test = 'the test is running';

$scope.getdata = function(){
    var item = $scope.post;
    console.log(item);
    $scope.list = [{'name': 'shem', 'job':'engineer'}, 
        {'name':   'Reinhard', 'job': 'devops'}]
}
$scope.register = function(){
    console.log($scope.regname);
}`enter code here`


}]);

illeb · Accepted Answer · 2016-08-24 09:34:21Z

1

Because you are using

console.log($scope.regname);

that isn't existing in your scope. In fact, in your HTML you have

<input type="text" name="regname" value='{{i.name}}' \ng-model='{{i.name}}' hidden>

But regname is only the name of the input, not a binding to your scope.

The solution

Replace your ng-click register() with:

<input type="submit" name="sub2" ng-click="register(i.name)">

and then your register function should be:

$scope.register = function(name){
   console.log(name);
}

P.S.

No need to use {{}} brackets in ng-model (ng-model='{{i.name}}'). Replace it with ng-model="i.name" as shown in the docs.

edited Aug 24, 2016 at 9:34

answered Aug 24, 2016 at 8:55

illeb

2,9471 gold badge23 silver badges35 bronze badges

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

2 Comments

Shemogumbe Over a year ago

Thanks for the answer, it saved my day

illeb Over a year ago

Accept as an answer if you found it as your answer, so we don't pollute SO with unresolved questions.

Collectives™ on Stack Overflow

AngularJS two way data binding not working

1 Answer 1

The solution

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The solution

2 Comments

Related