Javascript 角度动态表单绑定

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

假设我有一个动态表单，我想绑定到一个模型中，例如，这个表单可以让您创建一个书架。
一个书架有一个名字和一个书的列表，然后每本书都有一个名字和作者
假设它将是一个定义书籍的表单，通过“添加书籍”按钮可以显示一个表单来定义一本新的书籍（您可以根据需要添加任意数量的书籍）

我想要得到的结果是类似于JSON的：

{name:“shelf1”，books:[//books的JSON对象]}

---

有没有一种方法可以使用Angular来正确实现这种行为？提前感谢

解决这个问题可能有很多方法。由于不熟悉angular，我建议重新学习一些术语（例如，如果不熟悉directive）。我想到的第一个解决方案（它倾向于密切关注问题域）是为bookShelf和book制定一个指令。这本书放在书架里。看

//定义一个模块
var mod=angular.module（“myApp”，[]）；
//主控制器
模块控制器（“MainCtrl”，函数（$scope）{
//空架子
$scope.sheels=[]；
$scope.addShelf=函数（）{
//做一个新架子
$scope.sheels.push（{name:，books:[]}）；
}
});
//定义书架指令
修改指令（“书架”，功能（）{
返回{
限制：“A”，
作用域：{bookShelf:'='}，
模板：“书架名称：
添加书籍”，
控制器：函数（$scope、$element、$attrs）{
$scope.addBook=函数（）{
$scope.bookShelf.books.push（{name:，author:}）；
}
}
}
});
//定义book指令
mod.指令（“book”，函数（）{
返回{
限制：“A”，
作用域：{book:'='}，
//这里只需要一个书架，因为一本书如果不在书架上，很可能是无用的。
要求：“^bookShelf”，
模板：“书名：
作者：”，
链接：函数（范围、元素、属性）{
//还没在这里做什么
}
}
});

以及使用它的示例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>

Shelf JSON:{{Shelf}}






添加搁板

无论你在问题中说了什么，都很有可能。要实现这一点，必须使用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>

ng重复每次重复控制器的声明，如下所示：

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

最后，这是一个点击事件，它将触发并定义为：

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

有关详细信息，请参见

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

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