角动态表单绑定

角度上可能有很多方法可以解决此问题。我是新手，不建议使用某些术语（例如，如果不熟悉，则使用指令）。我想到的第一个解决方案（并且趋向于紧跟问题领域）是为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>