带有点的Angularjs范围变量在ng-repeat中显示未定义答案

【问题标题】：Angularjs scope variable with dot displays undefined within ng-repeat带有点的Angularjs范围变量在ng-repeat中显示未定义
【发布时间】：2018-06-09 11:22:23
【问题描述】：

我有一个 angularjs 表单正在尝试提交。范围变量的每个形式 ng-model 变量都带有点，例如 ng-model="post.title", ng-model="post.pid".

遇到的问题是，每当单击提交按钮时，post.pid 和 post.title 都会不断提醒值 undefined..

我已经梳理了stackoverflow的解决方案，我找到了这两个链接

AngularJS $scope form attribute is undefined after ng-submit

$scope with dot (.) not initializing values to input fields in angular

他们的回答是我必须首先初始化$scope.post，所以我根据两个链接提供的解决方案如下实现了它。

$scope.post = {}; 
  $scope.submitButton = function(){
alert($scope.post.pid);
alert($scope.post.title);
  }

然而，每次点击提交按钮时，它都会不断提醒未定义。

下面是完整的代码

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="post in posts">
  <form>
    post Id<br>
    <input type='text' ng-model="post.pid" >
    <br> post Title<br>
    <input type='text' ng-model="post.title" name="title">
    <br>
    <input type='button' id='but_save' value='Save' ng-click="submitButton()">
</form>
</div>


<script>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http, $parse) {

  $scope.posts = [
    {
      "pid" : "1",
      "title" : "title1"
    },
    {
      "pid" : "2",
      "title" : "title2"
    },
    {
      "pid" : "3",
      "title" : "title3"
    },
  ]




$scope.post = {}; 


  $scope.submitButton = function(){

alert($scope.post.pid);
alert($scope.post.title);
  }

});
</script>

</body>
</html>

【问题讨论】：

标签： angularjs

【解决方案1】：

由于ng-repeat 为每个项目创建了一个子范围，它对父范围不可见。

将post 对象作为参数传递给提交函数：

<div ng-repeat="post in posts">
  <form>
    post Id<br>
    <input type='text' ng-model="post.pid" >
    <br> post Title<br>
    <input type='text' ng-model="post.title" name="title">
    <br>
    <input type='button' id='but_save{{$index}}' value='Save'
           ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶u̶b̶m̶i̶t̶B̶u̶t̶t̶o̶n̶(̶)̶"̶
           ng-click="submitButton(post)" />
  </form>
</div>

在函数中使用该参数：

$scope.submitButton = function(post){
    ̶a̶l̶e̶r̶t̶(̶$̶s̶c̶o̶p̶e̶.̶p̶o̶s̶t̶.̶p̶i̶d̶)̶;̶
    alert(post.pid);
    ̶a̶l̶e̶r̶t̶(̶$̶s̶c̶o̶p̶e̶.̶p̶o̶s̶t̶.̶t̶i̶t̶l̶e̶)̶;̶
    alert(post.title);
}

【讨论】：

【解决方案2】：

你的问题是ng-repeat中的post和$scope.post不一样，因为ng-repeat创建了一个子作用域：

ngRepeat 指令从一个收藏。每个模板实例都有自己的范围，其中给定的循环变量设置为当前集合项

要让您的 submitButton 函数查看输入，您需要：

要么将提交的帖子的$index 传递给它，然后从$scope.posts 获取值
或直接将值作为函数的参数传递

我宁愿避免索引操作并选择第二个选项：

<input type='button' id='but_save' value='Save' ng-click="submitButton(post.pid,post.title)">

【讨论】：