AngularJS双向数据绑定不起作用答案

【问题标题】：AngularJS two way data binding not workingAngularJS双向数据绑定不起作用
【发布时间】：2016-08-24 08:50:08
【问题描述】：

我在使用双向数据绑定时遇到了问题，我从控制器获取了一个对象数组，当我发出另一个请求尝试提交部分数据时，当我使用 @987654321 时，它返回并在控制器中未定义@, 该应用程序使用 AngularJS 1.5.8 和 angular-route 有人可以帮我弄清楚为什么注册范围函数中的console.log会记录未定义而不是名称。编码我的索引文件：

<!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`


}]);

【问题讨论】：

标签： javascript angularjs data-binding

【解决方案1】：

因为你正在使用

console.log($scope.regname);

这在您的范围内不存在。事实上，在你的 HTML 中你有

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

但 regname 只是输入的名称，而不是与您的作用域的绑定。

解决办法

将您的 ng-click register() 替换为：

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

然后你的注册函数应该是：

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

附言

不需要在 ng-model (ng-model='{{i.name}}') 中使用 {{}} 括号。将其替换为 ng-model="i.name" 如docs 所示。

【讨论】：

感谢您的回答，它拯救了我的一天
如果您发现它是您的答案，请接受它作为答案，因此我们不会用未解决的问题污染 SO。