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`
}]);
1 answers
solution1
1 2016-08-24 08:55:59
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);
}
PS
No need to use {{}} brackets in ng-model ( ng-model='{{i.name}}' ). Replace it with ng-model="i.name" as shown in the docs .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.