angularjs div 的复制。每个下一个按钮控制相应的 div

Question

我有这样一个简化的标记，它按姓氏和名字附加并填充每一行；同样通过单击 "List" 按钮，我需要在新的弹出窗口中填写有关此人的其他数据 div 并将所有信息保存到 LocalStorage。

问题是当我点击不同的 "List" 按钮时出现并隐藏相同的 div 但任务是：通过点击不同的 "List" 按钮出现和隐藏不同的 divs（克隆）。

非常感谢您的支持。

var app = angular.module("myApp",['listOfBooks']);
            app.controller("myCtrl", function($scope){
                $scope.authors = [];

                $scope.addAuthor = function(){
                    var author = {};
                    author.surname = "";
                    author.name = "";
                    $scope.authors.push(author); 
                };
            });
           
           var app = angular.module("listOfBooks",[]);
        app.controller("booksCtrl", function($scope){
            $scope.showBooks = false;
            $scope.showBookList = function(){
                $scope.showBooks = !$scope.showBooks;
            }

            $scope.books = [];
            
            $scope.addBook = function(){
                var book = {};
                book.title = "";
                $scope.books.push(book); 
            };
        });

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <div class="container">
            <h3>AUTHORS' LIST</h3>
            <div class="btn-group">
                <button ng-click ="addAuthor()" type="button" class="btn btn-default">Add</button>
            </div>
            <form ng-controller="booksCtrl" name ="myForm"> 
                <table class="table table-bordered">
                    <tr>
                        <th>Surname</th>
                        <th>Name</th>
                        <th>Books</th>
                    </tr>
                    <tr ng-repeat="author in authors">
                        <td><input ng-model="author.surname" type="text" class="form-control"></td>
                        <td><input ng-model="author.name" type="text" class="form-control"></td>
                        <td>
                            <button ng-click="showBookList()" type="button" class="btn btn-default">List</button>    
                        </td>
                    </tr>
                </table>
                 
                <div ng-show="showBooks" class="col-sm-8" style="background-color:lightblue; position: absolute; left:5px; top:5px;z-index:2;">
                    <div class="btn-group">
                        <button ng-click ="addBook()" type="button" class="btn btn-default">Add</button>
                    </div>
                    <table class="table table-bordered">
                        <tr>
                            <th>Title</th>
                        </tr>
                        <tr ng-repeat="book in books">
                            <td><input ng-model="book.title" type="text" class="form-control"></td>
                        </tr>
                    </table> 
                </div>    
            </form>
        </div>
           </body>
</html>

Answer 1

我理解这个问题是关于您应该如何添加关于作者的书籍列表。当前的代码创建了一个书籍列表，但不允许书籍与给定的作者相关联。除了添加一个部分来显示 author 数组的内容之外，我只做了很少的改动。我还在列表中添加了一个简单的关闭按钮 div 以便于使用。

此示例利用您现有的 authors 数组，并在 books 属性下添加一个子数组。当您添加一位作者，然后添加一本书时，如果属性尚不存在，则会创建它。

var app = angular.module("myApp", ['listOfBooks']);
app.controller("myCtrl", function($scope) {
  $scope.authors = [];

  $scope.addAuthor = function() {
    var author = {};
    author.surname = "";
    author.name = "";
    $scope.authors.push(author);
  };
});

var app = angular.module("listOfBooks", []);
app.controller("booksCtrl", function($scope) {
  $scope.showBooks = false;

  $scope.currentAuthor = {};
  $scope.showBookList = function(author) {
    $scope.showBooks = !$scope.showBooks;
    $scope.currentAuthor = author;
  }

  $scope.addBook = function() {
    // If the current author doesn't have a books array yet, create an empty one.
    $scope.currentAuthor.books = $scope.currentAuthor.books || [];
    var book = {};
    book.title = "";
    $scope.currentAuthor.books.push(book);
  };
});

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <div class="container">
    <h3>AUTHORS' LIST</h3>
    <div class="btn-group">
      <button ng-click="addAuthor()" type="button" class="btn btn-default">Add</button>
    </div>
    <form ng-controller="booksCtrl" name="myForm">
      <table class="table table-bordered">
        <tr>
          <th>Surname</th>
          <th>Name</th>
          <th>Books</th>
        </tr>
        <tr ng-repeat="author in authors">
          <td><input ng-model="author.surname" type="text" class="form-control"></td>
          <td><input ng-model="author.name" type="text" class="form-control"></td>
          <td>
            <button ng-click="showBookList(author)" type="button" class="btn btn-default">List</button>
          </td>
        </tr>
      </table>

      <div ng-show="showBooks" class="col-sm-8" style="background-color:lightblue; position: absolute; left:5px; top:5px;z-index:2;">
        <div class="btn-group">
          <button ng-click="addBook()" type="button" class="btn btn-default">Add</button>
        </div>
        <table class="table table-bordered">
          <tr>
            <th>Title</th>
          </tr>
          <tr ng-repeat="book in currentAuthor.books">
            <td><input ng-model="book.title" type="text" class="form-control"></td>
          </tr>
        </table>
        <button class="btn btn-sm btn-warning" ng-click="showBooks = false">Close</button>
      </div>
    </form>
  </div>
  <hr />
  <h2>authors data</h2>
  <ul> 
    <li ng-repeat="a in authors">
      Surname: {{ a.surname }}, Name: {{ a.name }}
      <ul>
        <li ng-repeat="b in a.books">Book: {{ b.title }}</li>
      </ul>
    </li>
  </ul>
</body>

</html>

angularjs div 的复制。每个下一个按钮控制相应的 div

angularjs div's duplicating. every next button controls a corresponding div

html

html-table

duplicates

angularjs

angularjs-ng-repeat