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

【问题标题】：angularjs div's duplicating. every next button controls a corresponding divangularjs div 的复制。每个下一个按钮控制一个相应的 div
【发布时间】：2018-06-01 06:01:45
【问题描述】：

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

问题是当我点击不同的“列表”按钮时会出现并隐藏相同的 div，但任务是：通过单击不同的“列表”按钮出现并隐藏不同的 div（克隆）。

非常感谢您的支持。

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>

【问题讨论】：

你能澄清一下吗？您的书单是否与给定作者相关联？

标签： html angularjs html-table duplicates angularjs-ng-repeat

【解决方案1】：

我理解这个问题是关于你应该如何添加关于作者的书籍列表。当前代码创建书籍列表，但不允许书籍与给定作者相关联。除了添加一个部分来显示作者数组的内容之外，我只做了很少的改动。我还在列表 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>

【讨论】：

很棒，但我遇到了另一个问题 - 无法验证输入。 $scope.addAuthor = function() { if($scope.myForm.$valid){ var author = {};作者姓氏 = "";作者.name = ""; $scope.authors.push(author);} else{ alert("warning...")} };附加到所有输入，但......错误 - “TypeError：无法读取未定义的属性'$valid'”。也许是 ng-controller="booksCtrl"？
您能为此创建一个问题吗？这与这个问题有点不同。需要查看您使用代码的位置等才能正确回答。