Question

我在AngularJS [frontend]和Node.js [backend]

中尝试CRUD操作

错误：当我点击编辑按钮表单字段中的数据显示并更改数据，然后点击提交按钮再次在警告中显示数据我点击提交按钮不显示提醒

这里是我使用的代码：

app.js

angular.module('test').controller('schedule', function (
  $scope, $http) {

        var url = "http://jsonplaceholder.typicode.com/posts";
        $http.get(url).success(function (data) {
        $scope.details = data;
        })
        .error(function () {
            $scope.error = "error";
        });

      $scope.edit= function(data){
          $scope.data=data;
        });

      }
      $scope.update= function(data){
          $scope.update=data;
           var d=angular.toJson(data);
           alert(d);
          // $http.post(url, data, config) //add your logic
          // .success(function(data, status) {
          //   if (status == 201) {
          //     $scope.message = data;
          //     alert(status);
          //   }
          // })
          // .error(function(data, status) {
          //   if (status == 401) {
          //     $scope.message = status;
          //   } else if (status == 400) {
          //     $scope.message = status;
          //   }
          //   $scope.message=status;
          // });

      }

});

这里是视图部分的的index.html

<div layout="row">

<div flex="50">
  <table >
    <tr ng-repeat="data in details">
        <td>{{data.id}}</td>
        <td>{{ data.title }}</td>
        <td>  <md-button   ng-click="edit(data)"> edit </md-button></td>
    </tr>
</table>
</div>


<div flex="50">
  <h1>Edit</h1>
  <div class="border" layout=column class="md-raised" flex-sm="100" flex-xs="auto" >
    <md-input-container >
      <label>
        <i class="zmdi zmdi-account-circle"></i>
      id
      </label>
      <input type="text" ng-model="data.id" name="id">
    </md-input-container>
    <md-input-container class="nomargin">
      <label>
        <i class="zmdi zmdi-lock-open"></i>
        title</label>
        <input type="text" ng-model="data.title" name="title" required>
      </md-input-container>

      <md-button ng-click="update(data)"> submit </md-button>
    </div>

</div>
</div>

view image

Answer 1

$scope.update= function(data){
          $scope.update=data;

将$ scope.update设置为对象时，它不再是函数;）尝试创建不同的数据占位符

$scope.update= function(data){
              $scope.myData=data;

Answer 2

您将收到以下错误

TypeError: v2.update is not a function
    at fn (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:213:110), <anonymous>:4:222)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:254:74)
    at r.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:133:313)
    at r.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:134:17)
    at HTMLButtonElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:254:126)
    at If (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:35:367)
    at HTMLButtonElement.Hf.d (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:35:314)(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292r.$apply @ angular.js:16157(anonymous function) @ angular.js:23618If @ angular.js:3346Hf.d @ angular.js:3334

因为@judson Terrell所说的设置$ scope时更新不再是一个函数

$scope.update= function(data){
          $scope.newData=data;
           var d=angular.toJson(data);
           alert(d);
          // $http.post(url, data, config) //add your logic
          // .success(function(data, status) {
          //   if (status == 201) {
          //     $scope.message = data;
          //     alert(status);
          //   }
          // })
          // .error(function(data, status) {
          //   if (status == 401) {
          //     $scope.message = status;
          //   } else if (status == 400) {
          //     $scope.message = status;
          //   }
          //   $scope.message=status;
          // });

      }

Angularjs REST api post方法“更新”错误

2 个答案: