更新表单时无法读取 angularjs 中未定义的属性“1”

Question

我正在尝试实现一个更新表单，但是当我点击提交按钮时，我经常遇到这个错误：

TypeError：无法读取未定义的属性“1”

这是我的控制器：

$scope.pets = [];

$http.get(baseApiUrl + '/pets').
success(function (data) {
  console.log("Success : " + data);
  $scope.pets = data;
}).error(function () {
  console.log(data);
});

$scope.UpdateData = function (index) {      
    $http({
        method: 'PUT',
        url: baseApiUrl + '/pets/' + index,
        data: {
            id: index,
            name: $scope.updateName[index],
            age: $scope.updateAge[index],
            owner: $scope.updateOwner[index],
        }
    }).then(function successCallback(response) {
        console.log(response);
    }, function errorCallback(response) {
        console.log(response);
    });
};

这是我的观点：

<tbody>
    <tr ng-repeat="pet in pets track by pet.id">
        <td><input type="text" placeholder="{{ pet.name }}" name="name" class="form-control" ng-model="updateName[pet.id]" required></td>
        <td><input type="text" placeholder="{{ pet.age }}" name="age" class="form-control" ng-model="updateAge[pet.id]" required></td>
        <td><input type="text" placeholder="{{ pet.owner }}" name="owner" class="form-control" ng-model="updateOwner[pet.id]" required></td>
        <td><input id="update" type="submit" class="btn btn-danger disabled" ng-click="UpdateData(pet.id)" /></td>
    </tr>
</tbody>

我找不到为什么这不起作用。如果你有什么建议。谢谢

Answer 1

我问了一个与这个主题相关的问题（但在 C# 中）Create dynamic variable name 请检查问题和答案。希望对你有帮助。

我们不能在c#中创建动态变量有一个答案。就像我们不能在 angularjs 中创建任何动态模型名称一样。

但是在这种情况下，我们可以在array(pets) 中动态创建一个新的对象名称。

请尝试以下方式

您需要将ng-model="pet.updateAge[pet.id]" 更改为ng-model="pet.updateAge"，您可以通过参数ng-click="UpdateData(pet)" 将宠物对象传递给您的提交方法

    <tr ng-repeat="pet in pets track by pet.id">
    <td>
        <input type="text" placeholder="{{ pet.name }}"
        name="name" class="form-control" ng-model="pet.updateName"
        required>
    </td>
    <td>
        <input type="text" placeholder="{{ pet.age }}"
        name="age" class="form-control" ng-model="pet.updateAge"
        required>
    </td>
    <td>
        <input type="text" placeholder="{{ pet.owner }}"
        name="owner" class="form-control" ng-model="pet.updateOwner"
        required>
    </td>
    <td>
        <input id="update" type="submit" class="btn btn-danger disabled"
        ng-click="UpdateData(pet)" /></td></tr>

您可以从方法参数中获取值，您可以按照以下方式使用它

$scope.UpdateData = function (pet) {      
    $http({
        method: 'PUT',
        url: baseApiUrl + '/pets/' + pet.id,
        data: {
            id: pet.id,
            name: pet.updateName,
            age: pet.updateAge,
            owner: pet.updateOwner,
        }
    }).then(function successCallback(response) {
        console.log(response);
    }, function errorCallback(response) {
        console.log(response);
    });
};

Answer 2

我猜是这里抛出了错误：

$http({
    method: 'PUT',
    url: baseApiUrl + '/pets/' + index,
    data: {
        id: index,
        name: $scope.updateName[index],
        age: $scope.updateAge[index],
        owner: $scope.updateOwner[index],
    }
})

可能是因为$scope.updateName、$scope.updateAge 和$scope.updateOwner 中的至少一个是未定义的。提供的代码中没有任何内容可以初始化这些，我怀疑您的代码中也是如此。

Answer 3

ngRepeat 是一个独立作用域，因此绑定在 ngRepeat 作用域中的值特定于该作用域，而不是控制器作用域。

如果您想将值从 ngRepeat 传递到控制器，最好使用 ControllerAs 方法，如下所示

<body ng-app="myApp" ng-controller="myCrtl as ctl">
<table>
  <tbody>
    <tr ng-repeat="pet in ctl.pets">
      <td>
        <input type="text" placeholder="{{ pet.name }}" name="name" class="form-control" ng-model="ctl.updateName[pet.id]" ng-init="ctl.updateName[pet.id]=pet.name" required="" />
      </td>
      <td>
        <input type="text" placeholder="{{ pet.age }}" name="age" class="form-control" ng-model="ctl.updateAge[pet.id]" ng-init="ctl.updateAge[pet.id]=pet.age" required="" />
      </td>
      <td>
        <input type="text" placeholder="{{ pet.owner }}" name="owner" class="form-control" ng-model="ctl.updateOwner[pet.id]"  ng-init="ctl.updateOwner[pet.id]=pet.owner"required="" />
      </td>
      <td>
        <input id="update" type="submit" class="btn btn-danger disabled" ng-click="ctl.UpdateData(pet.id)" />
      </td>
    </tr>
  </tbody>
</table>

你只是用占位符显示值，这意味着你实际上并没有为模型分配值，我已经在推特上发布了你的一些代码，请检查下面的 plunker，希望这有助于你的要求

https://plnkr.co/edit/eP2dezbB2MaCUddVRb8O?p=preview

Answer 4

您还没有定义以下项目

 $scope.updateName[index],
 $scope.updateAge[index],
 $scope.updateOwner[index]

所以检查项目/变量但它无法找到所以你得到错误

Answer 5

  $scope.pets = [];

$http.get(baseApiUrl + '/pets').
success(function (data) {
  console.log("Success : " + data);
  $scope.pets = data;
}).error(function () {
  console.log(data);
});

$scope.UpdateData = function (pet) {        
    $http({
        method: 'PUT',
        url: baseApiUrl + '/pets/' + pet.id,
        data: {
            id: pet.id,
            name: pet.updateName,
            age: pet.updateAge,
            owner: pet.updateOwner,
        }
    }).then(function successCallback(response) {
        console.log(response);
    }, function errorCallback(response) {
        console.log(response);
    });
};    

好的更新正在运行，但我有另一个错误！例如，当我更新 id 为 2 的数组 [1] 时，这将修改数组 [0]。所以我必须修复它。感谢您的解决方案。