MEAN Stack Update-Funktion

Question

Also was ich versuche zu tun ist von Client-Seite zu aktualisieren und im Backend auch zu aktualisieren. Ich verwende MEAN Stack, um dies zu erreichen. Momentan kann ich die ID des einzelnen Elements erhalten, das ich aktualisieren möchte, aber ich kann nicht herausfinden, was ich vermisse, um es in der Datenbank zu aktualisieren.

Hier ist mein HTML-Code:

<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> 

Hier ist mein script.js Code:

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

};//end of Update 

Jetzt mit diesem habe ich versucht, mehrere verschiedene Dinge, $ scope.book.title, usw. gibt aber den Fehler 'Eigenschaft nicht lesen' Titel 'von undefiniert.'

Und hier ist mein app.js Code:

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

ich wirklich für alles offen bin, ich mehrere verschiedene Dinge mit wenig zu keinem Erfolg versucht haben. Lassen Sie es mich wissen, wenn Sie weitere Erläuterungen zum Code benötigen.

Vielen Dank im Voraus!

-Maykid

Answer 1

Statt id auf die update Funktion übergeben, übergeben Sie die ganze book Objekt:

$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; 
    }); 
}; 

Die ng-repeat Richtlinie schafft geordneten Bereiche für jedes Element. Das Objekt book wird auf diese untergeordneten Bereiche platziert. Verwenden Sie also book als Argument für eine Funktion in ng-click oder ng-submit.