javascript - AngularJS 和 MongoDB (CRUD) 保存/更新——不工作

Question

我有一个重复来自 mongoDB 的数据的表单:

• 每个数据连续返回 - 名字、姓氏和手机
• 用户有 3 个选择 - 编辑、保存和删除

编辑和删除都通过指向 client._id 来工作。它能够选择特定的行，但“保存”不起作用。我认为我没有正确理解 ng-repeat 和 ng-click 的基本概念

查看

<form name="updateClientForm" ng-repeat="(clientIndex, client) in ctrl.clients" novalidate>

            <div class="row" style="margin-top: 10px">

                <div class="col-md-3 col-md-offset-1">
                    <div class="form-group">
                        <input name="firstname" class="form-control" type="text" ng-model="client.firstname" required>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <input name="lastname" class="form-control" type="text" ng-model="client.lastname" required>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <input name="mobile" class="form-control" minlength="8" maxlength="8" type="text" ng-model="client.mobile" required>
                    </div>
                </div>

                <div class="col-md-3">
                        <button type="button" ng-click="ctrl.editClient(client._id)" class="btn-sm btn-warning">
                                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                            </button>
                        <button name="button" ng-click="ctrl.saveClient(client)" class="btn-sm btn-success">
                                <i class="fa fa-check-square" aria-hidden="true"></i>
                            </button>
                            <button type="button" ng-click="ctrl.deleteClient(client._id); ctrl.removeRow(clientIndex);" class="btn-sm btn-danger">
                                <i class="fa fa-trash" aria-hidden="true"></i>
                            </button>
                </div>

            </div>

        </form>

Controller

//SAVE
self.saveClient = function (client) {

  console.log("Saving client... ");
  console.log('client - before calling paAppAPI: ', client); //Returns array with client data

  paAppAPI.updateClient(client)
  .then(function (result) {
    console.log(result);

    self.message = result.data;
    self.showSuccessMessage = true;

  }).catch(function (err) {
    console.log(err);
    self.message = err.data;
    self.showFailureMessage = true;
  });

}

服务

//SAVE
     self.updateClient = function (client) {
        var defer = $q.defer();
        const id = client._id; //ADDED

     console.log('client - before calling http: ', client); 
     console.log('id- before calling http: ', id); 

        $http.put("/api/client/" + id, {client : client})
            .then(function (result) {
                //alert(result.data.msg);
                console.log(client);
                defer.resolve(result);

            }).catch(function (err) {
                defer.reject(err);
            });

        return defer.promise;

    }

路线

//SAVE
app.put("/api/client/:id", function (req, res) {

console.log(req.params.id); //returns correct id 
console.log(req.body.client); //returns newly edited data

    Client.updateOne({ "id" : req.params.id }, { $set: req.body.client }, (err, result) => {
        if (err) {
            console.log(err);
            handleError(err, res);
            return;
        }

        res.status(200).json({msg: 'Successfully saved'});
    });
});

任何建议都会有帮助! :)

Answer 1

在您的表单中，进行以下更改 - 传递 client至 ctrl.saveClient
<button name="button" ng-click="ctrl.saveClient(client)" class="btn-sm btn-success">
<i class="fa fa-check-square" aria-hidden="true"></i>
</button>

在Controller中，对self.saveClient进行如下修改

//SAVE
self.saveClient = function (client) {

  console.log("Saving client... ");
  console.log('client - before calling paAppAPI: ', client);
  paAppAPI.updateClient(client)
  .then(function (result) {
    console.log(result);

    self.message = result.data;
    self.showSuccessMessage = true;

  }).catch(function (err) {
    console.log(err);
    self.message = err.data;
    self.showFailureMessage = true;
  });

}

在服务中，在 self.updateClient 中进行以下更改

//SAVE
    self.updateClient = function (client) {
        var defer = $q.defer();
        const id = client._id;
        console.log('client - before calling http: ', client);  
        console.log('id- before calling http: ', id);
        $http.put("/api/client/" + id, {client: client })
            .then(function (result) {
                console.log(result);
                defer.resolve(result);

            }).catch(function (err) {
                defer.reject(err);
            });

        return defer.promise;

    }         

在服务端，修改api更新如下

//SAVE
app.put("/api/client/:id", function (req, res) {

console.log(req.params.id); //returns undefined
console.log(req.body.client); //returns {}

    Client.updateOne({ "_id" : req.params.id }, { $set: req.body.client }, (err, result) => {
        if (err) {
            console.log(err);
            handleError(err, res);
            return;
        }

        res.status(200).json({msg: 'Successfully saved'});
    });
});