MEAN堆栈更新功能

时间:2016-11-08 14:55:26

标签: angularjs mongodb

所以我要做的是从客户端更新并在后端更新。我正在使用MEAN堆栈来完成此任务。目前,我可以获取我想要更新的单个项目的ID,但无法弄清楚我在数据库中更新它所缺少的内容。

这是我的HTML代码:

<h1>Sorting Books</h1>
<div ng-init="getBooks()"></div>
<p><input type="text" ng-model="test" placeholder="Search..."></p>
<p><select ng-model="category" ng-options="x for x in categoryNames">Category</select></p>
eBook: <input type="checkbox" ng-model="eBook">

<ul ng-repeat="book in allTheBooks | filter:test | filter:category | filter: eBook">
<li><strong>Title: </strong><span editable-text="book.title" e-name="name" e-form="editableForm" e-required>{{book.title}}</span></li>
<ul>
  <li><strong>Category: </strong><span editable-text="book.category" e-name="name" e-form="editableForm" e-required>{{book.category}}</span></li>
  <li><strong>eBook: </strong><span editable-text="book.eBook" e-name="name" e-form="editableForm" e-required>{{book.eBook?'Yes':'No'}}</span></li>
  <li><strong>Volume: </strong><span editable-text="book.volume" e-name="name" e-form="editableForm" e-required>{{book.volume}}</li>
  <li><strong>Author: </strong><span editable-text="book.author" e-name="name" e-form="editableForm" e-required>{{book.author}}</li>
  <li><strong>Genre: </strong><span editable-text="book.genre" e-name="name" e-form="editableForm" e-required>{{book.genre}}</li>
  <li><strong>Stars: </strong><span editable-text="book.stars" e-name="name" e-form="editableForm" e-required>{{book.stars}}</li>
  <li><strong>Comments: </strong><span editable-text="book.comments" e-name="name" e-form="editableForm" e-required>{{book.comments}}</li>
  <li><button type="button" ng-click="deleteBook(book._id)">Delete</button></li>
  <li>
    <form editable-form name="editableForm" onaftersave="saveUser()">
    <div>
    <button type="button" class="btn btn-default" ng-click="editableForm.$show(); update(book._id);" ng-show="!editableForm.$visible">Edit</button>
    <span ng-show="editableForm.$visible">
      <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">Save</button>
      <button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">Cancel</button>
    </span>
    </div>
    </form>
  </li>
</ul>
</ul>

这是我的Script.js代码:

$scope.update = function( id ){
console.log('figuring things out... ' , id);

};//end of Update

现在有了这个,我尝试了多种不同的东西,$ scope.book.title等,但却给出了错误,因为它无法读取属性&#39; title&#39;未定义的。&#39;

这是我的app.js代码:

app.put('/bookUpdate/:id', function (req, res) {
var bookId = req.params.id;
console.log('from app.js ' , bookId);
});//end of app.update function

我真的对任何事情持开放态度,我尝试过多种不同的事情,几乎没有成功。如果您需要进一步澄清代码,请与我们联系。

提前致谢!

-Maykid

1 个答案:

答案 0 :(得分:0)

不是将id传递给update函数,而是传递整个book对象:

$scope.update = function(book){
    var url = BASE + "/bookUpdate/" + book._id;
    $http.put(url, book).then(function onSuccess(response) {
        console.log("Success");
    }).catch(function onReject(errorResponse) {
        console.log(errorResponse.status);
        throw errorResponse;
    });
 };

ng-repeat指令为每个项目创建子范围。 book对象放在这些子范围上。因此,使用book作为ng-clickng-submit中函数的参数。