平均堆栈环回更新

对不起，如果这是一个简单的，我是相对较新的环回/后端，

我要做的是更新现有的数据库记录ID和名称与以下代码。 HTML文件

<div>
  <h1>COMPANY DETAILS</h1>
</div>
<div>
  <div>
    <table>
      <thead>
        <tr>
          <th>Company Name</th>
          <th>Company Code</th>
          <th>Remove</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="form-control" ng-model="newCompany.name"></td>
          <td><input class="form-control" ng-model="newCompany.id"></td>
          <td><button class="btn btn-primary" ng-click="add()">Add</button></td>
          <td><button class="btn btn-info" ng-click="update()">Update</button></td>
        </tr>
        <tr ng-repeat="company in companies | orderBy:'+name'">
          <td>{{company.name}}</td>
          <td>{{company.id}}</td>
          <td><button class="btn btn-danger" ng-click="remove(company.id)">Remove</button> </td>
          <td><button class="btn btn-warning" ng-click="edit(company)">Edit</button> </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>// This is just a sample script. Paste your real code (javascript or HTML) here.
if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

JS文件

'use strict';
/**
 * @ngdoc function
 * @name abcApp.controller:CompanyCtrl
 * @description
 * # CompanyCtrl
 * Controller of the abcApp
 */
angular.module('abcApp')
  .controller('CompanyCtrl', ['$scope', 'Company', function ($scope, Company) {
      $scope.newCompany = { 'id': '', 'name': '' };
      $scope.companies = [];
      Company
          .find()
          .$promise
          .then(function (results) {
              $scope.companies = results;
          });
      $scope.update = function (company) {
          company.findById({ id: company })
            .$promise
            .then(function () {                  
                $scope.company.id = 13.40;
                console.log(company.id);
           $scope.company.$save();
       });
      };
      $scope.edit = function (company) {
          $scope.newCompany = { id: company.id, name: company.name };
      }
      $scope.add = function () {
          Company.create($scope.newCompany, function (company) {
              $scope.newCompany = { 'id': '', 'name': '' };
              Company
                  .find()
                  .$promise
                  .then(function (results) {
                      $scope.companies = results;
                  });
          }, function (errorResponse) {
              console.log(errorResponse);
          });
      };
      $scope.remove = function (cid) {
          Company.deleteById({ id: cid })
           .$promise
              .then(function () {
                  console.log('deleted');
                  Company
                          .find()
                          .$promise
                          .then(function (results) {
                              $scope.companies = results;
                          });
              });
      }
  }]);

$scope.edit函数将公司id和名称带入两个文本框，$scope.update函数旨在更新数据库记录，编辑函数工作正常，但是在我的$scope中存在问题。当我点击更新按钮时，我在浏览器控制台中得到以下错误:

无法设置未定义或空引用的属性'name'

很抱歉写了这么长一篇文章，如果有任何帮助，我将不胜感激

看起来你是混合客户端代码和服务器端代码，$scope.edit工作的原因是因为它只包含客户端代码。

猫鼬呼叫(Collection)。创建、收集。)应该是服务器端

在你的例子中，我将如何使用MEAN堆栈:

Mongo是你的数据库，它包含你的文档和集合。

Express使用http调用将您的请求从客户端中继到Mongo。

Angular是客户端框架，你的JS客户端代码将大部分驻留在Angular控制器中。

为例:

我们想要数据库中所有的胡萝卜。

Clientside (JS):

angular.module('abcApp')
  .controller('myCarotCtrl', [dependencies,
  function(dependencies) {
     $scope.result = '';
     $scope.getCarrots = function() {
         $http.get('/carrots').
         then(function(data) {
              //Called when the request is successful
              $scope.result = data;
         },
         function(error) {
             //Called when the request failed
             console.log(error)
         }
     }
  }]);

Clientside (HTML):

<div ng-controller="myController" ng-init="getCarrots()">{{result}}</div>

服务器端:

//assuming express and mongoose have been required/initialized
//using Express to route the requests
//In this exemple request is not used because will dont need parameters
app.get('/carrots', function(request, response) {
    //Use mongoose to access your Carot Collection
    //{} is all documents in the collection
    Carot.find({}, function(err, documents) {
        //send back the documents to the client once they have been found
        response.status(200).send(document);
    });
});

我不能测试上面的代码，但我认为它会给你一些关于整个堆栈如何工作的想法

公司。findById({id: company})

这是一个打字错误吗?大写C在company ?我认为它应该类似于我在https://github.com/strongloop/loopback-example-angular/blob/master/client/js/controllers/todo.js#L7-L8

的示例

您的$scope。更新功能在很多方面都是错误的。首先因为它期望你发送公司参数，但是你正在用空参数调用方法。

这是你的方法

$scope.update = function (company) {
  company.findById({ id: company })
    .$promise
    .then(function () {                  
        $scope.company.id = 13.40;
        console.log(company.id);
        $scope.company.$save();
  });

};

这是你的html

<td><button class="btn btn-info" ng-click="update()">Update</button></td>

"company"参数是未定义的，所以您的控制台给您一个错误消息(您正在为findById id参数使用未定义的值- "id: company")。

如果你想这样调用更新方法，那么你可以使用$scope来代替company参数。newCompany变量，该变量已经有您想在单击编辑按钮后使用的数据。也就是说，你的更新方法应该是这样的:

$scope.update = function () {
  Company.findById({ id: $scope.newCompany.id })
    .$promise
    .then(function (company) {
      console.log(company);
      //$scope.company.$save();
    });
};

第二件要注意的事情是，您不需要编写远程"保存"方法(除非您为了练习而编写它)。Loopback已经为您生成了CRUD方法。因此，如果您想从客户端更新您的模型，请使用"upsert"方法或最适合您需求的类似方法。请参阅http://localhost:3000/explorer获取服务器上可用方法的列表。

相关内容

最新更新

热门标签：