Question

我试图实现更新表单但是当我点击提交按钮时，我经常出现这个错误：

TypeError：无法读取属性＆＃39; 1＆＃39;未定义的

这是我的控制器：

$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

我猜这里引发了错误：

PackageKit: Session UUID file exists - will not overwrite [some long path]/[filename].activeSandbox

可能是因为$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中至少有一个未定义。提供的代码中没有任何内容可以初始化这些内容，我也怀疑在您的代码中。

Answer 3

您尚未定义以下项目

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

因此检查项目/变量但无法找到，因此您收到错误

Answer 4

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 5

{{1}}

好的更新正在运行，但我还有其他错误！例如，当我更新具有id 2的数组[1]时，这将修改数组[0]。所以我必须解决它。谢谢你的解决方案。

无法阅读财产＆＃39; 1＆＃39;更新形式时angularjs中的undefined

5 个答案: