AngularJS-如何使用表單添加到對象

Question

這是我的HTML：

<div ng-controller="BooksController as bookCtrl">
    <form ng-submit="bookCtrl.add()">
        <input type="text" ng-model="bookCtrl.book.name">
        <input type="text" ng-model="bookCtrl.book.rating">
        <input type="text" ng-model="bookCtrl.book.type">
        <input type="text" ng-model="bookCtrl.book.author">
        <input type="hidden" value="fa fa-keyboard-o fa-stack-1x" ng-model="bookCtrl.book.picture">
        <input type="submit" value="Add">
    </form>
</div>

這是我的JS：

.controller("BooksController", ['BooksService', function(BooksService) {
    var self = this;
    self.getBooks = function() {
      return BooksService.getBooks();
   } 
    self.add = function(book) {
        alert(book.name);
        BooksService.add(book);
    };


}])

.factory("BooksService", [function() {
    var books = {
        1: {
            name: "k",
            review: "k",
            rating: 2,
            type: "k",
            author: "k",
            picture: "fa fa-keyboard-o fa-stack-1x",
            },
        2: {
            name: "b",
            review: "b",
            rating: 4,
            type: "b",
            author: "b",
            picture: "fa fa-code fa-stack-1x",
        }
    }

    return {
        getBooks: function() {
            return books;
        },
        add: function(book) {
            books[4] = book;
        }
    };
}])

這里的問題是，當我填寫表格信息並嘗試添加一本書時，這本書是未定義的。 我試着做

alert(book.name);

它給出了一個錯誤的說法

Cannot read property 'name' of undefined.

為何未定義？ 我要做的是獲取表單中提供的信息，並將一本書添加到“ books”對象中。

Answer 1

您在這里有兩個選擇。 使用this.book控制器實例：

self.add = function() {
    alert(this.book.name);
    BooksService.add(this.book);
};

或將書籍對象從HTML傳遞到控制器方法：

<form ng-submit="bookCtrl.add(bookCtrl.book)">
    <!-- ... -->
</form>

選擇您喜歡的東西。 我想說第一個清潔工不需要通過任何東西，因為它已經可用。

Answer 2

正如注釋正確所建議的那樣，您尚未在ng-submit="bookCtrl.add()"傳遞book對象。

您可以直接通過add函數引用bookCtrl.book對象：

self.add = function() {
    alert(self.book.name);
    BooksService.add(self.book);
};

Answer 3

嘗試這個：

<form ng-submit="bookCtrl.add(bookCtrl.book)">

或這個：

self.add = function() {
    alert(self.book.name);
    BooksService.add(self.book);};

Answer 4

將表單標簽更改為

<form ng-submit="bookCtrl.add(bookCtrl.book)">