Question

我是 Angular 的新手，我实际上想问一下是否有一种干净的方法来实现这种行为：

假设我有一个动态表单，我想绑定到一个模型中，例如，这个表单可以让你创建一个书架。
书架有一个名称和图书列表，然后每个图书都有一个名称和作者即可。
假设它将是一个定义书籍的表单，并使用“添加书籍”按钮显示一个表单来定义新的书（您可以添加更多书籍，如你所愿）。

我想要达到的结果是JSON，如：{name : "shelf1", books : [//json objects of books]}
有没有办法使用Angular正确实现此行为？提前致谢

Answer 1

角度解决这个问题的方法可能很多。作为棱角分明的新手，我建议刷一些条款（例如指令，如果不熟悉的话）。我想到的第一个解决方案（并且它倾向于密切关注问题域）是为bookShelf和book制定指令。这本书包含在书架中。请参阅jsfiddle。

//define a module
var mod = angular.module("myApp", []);

//Main Controller
mod.controller("MainCtrl", function ($scope) {
    //empty shelves
    $scope.shelves = [];

    $scope.addShelf = function () {
        //make a new shelf
        $scope.shelves.push({name: "", books: []});
    }
});

//define a bookShelf directive
mod.directive("bookShelf", function () {
    return {
        restrict: "A",
        scope: {bookShelf: '='},
        template: 'Shelf Name: <input ng-model="bookShelf.name"><br><div ng-repeat="bk in bookShelf.books"><div class="book" book="bk"></div></div><button ng-click="addBook()">Add Book</button>',
        controller: function ($scope, $element, $attrs) {
            $scope.addBook = function () {
                $scope.bookShelf.books.push({name: "", author: ""});
            }
        }
    }
});

//define a book directive
mod.directive("book", function () {
    return {
        restrict: "A",
        scope: {book: '='},
        //Only requiring bookshelf here because a book is likely to be useless if not on a shelf.
        require: "^bookShelf",
        template: 'Book Name: <input ng-model = "book.name"><br>Author: <input ng-model="book.author">',
        link: function (scope, element, attrs) {
            //Not doing anything here yet
        }
    }
});

使用HTML示例：

<div ng-app="myApp" ng-controller="MainCtrl">
    <div ng-repeat="shelf in shelves">
        <div class="shelf" book-shelf="shelf"></div>
        Shelf JSON: {{shelf}}
        <br><br>
    </div>
    <br><br>
    <button ng-click="addShelf()">Add Shelf</button>
</div>

Answer 2

无论你在问题中说什么，都很有可能。要实现这一点，您必须使用 angularjs 的 ng-repeat 指令。

以下是示例：

这是重复你的控制的div。

<div class="form-group" data-ng-repeat="book in books">
  <label for="book" ng-show="showBookLabel(book)">Books</label>
  <button ng-show="showAddBook(book)" ng-click="addNewBook()">Add another book</button>
  <input type="text" ng-model="book.name" name="" placeholder="Enter a book name">
</div>

因为这行代码而动态插入控件：

data-ng-repeat="choice in choices"

ng-repeat每次都使用来自控制器的声明重复：

$scope.books = [{id: 'book1'}, {id: 'book2'}, {id: 'book3'}];

最后这是click事件，它将触发并定义为：

$scope.addNewBook = function() {
  var newItemNo = $scope.books.length+1;
  $scope.books.push({'id':'book'+newItemNo});
};

有关ng-repeat的详细信息，您可以看到here

角动态表单绑定

2 个答案: