AnguarJS和MongDB（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>

调节器

//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'});
    });
});