Question

我卡住了，因为我必须为我的工作创建一个Update方法，但是对于AngularJs，表单不会获取ng-model信息。我不知道为什么。因为在我设法使用简单的POST方法轻松完成之前2小时。

以下是我的控制器中的代码：

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

这是我的观点：

<table class="table table-hover table-bordered">
    <thead>
    <tr class="text-center pointer back-grey">
      <th class="text-red">
        Nom
      </th>
      <th class="text-red">
        Age
      </th>
      <th class="text-red">
        Propriétaire
      </th>
      <th class="text-red">
        Action
      </th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="pet in pets">
        <td><input type="text" placeholder="{{ pet.name }}" name="name" class="form-control" ng-model="updateName" required></td>
        <td><input type="text" placeholder="{{ pet.age }}" name="age" class="form-control" ng-model="updateAge" required></td>
        <td><input type="text" placeholder="{{ pet.owner }}" name="owner" class="form-control" ng-model="updateOwner" required></td>
        <td><input id="update" type="submit" class="btn btn-danger disabled" ng-click="UpdateData(pet.id)" /></td>
    </tr>
    </tbody>
</table>

当我更改表单的值时，按下按钮我有：

Object {data: "1", status: 200, config: Object, headers: function}

正如我所问，id是petId，但名称并没有改变。当我用＆＃34; hello＆＃34;这样的字符串更改$ scope.updateName时这工作......

感谢您的帮助！

Answer 1

您对所有对象使用相同的变量＆＃39; pet＆＃39;。因此，如果您有两只宠物，则同一变量将有两个输入＆＃39; updateName＆＃39;，这可能会导致未定义的行为。我建议你做这样的事情：

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


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

PUT方法在AngularJs中起作用

1 个答案: