angularjs divの複製です。次のすべてのボタンは対応するdivを制御します

私は次の行を姓と名で追加して埋め込むような簡単なマークアップを持っています。また、 "リスト"ボタンをクリックすることで、この人に関する追加データを新しいポップアップディビジョンに入力し、すべての情報をLocalStorageに保存する必要があります。angularjs divの複製です。次のすべてのボタンは対応するdivを制御します

問題は、別の「リスト」ボタンをクリックして同じdivを非表示にするが、タスクが：をクリックして異なる「リスト」ボタンが表示され、異なる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>

出典

2017-12-18 Vladyslav Plakhuta

あなたは明らかにしてみてもらえますか？あなたの本のリストが特定の著者に関連していないという問題はありますか？ – Brian

私はどのようにあなたが、著者に関する本のリストを追加する必要があります周りすべき質問を理解しています。現在のコードでは、書籍のリストが作成されますが、書籍を特定の著者に関連付けることはできません。私は、著者アレイの内容を表示するセクションを追加するだけでなく、最小限の変更でこれを行いました。私はまた、簡単に使用できるようにリスト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>

出典

2017-12-18 21:33:55 Brian

素晴らしいですが、もう1つの問題に直面しました。入力を検証できません。 $ scope.addAuthor = function（）{if（$ scope.myForm。$ valid）{ var author = {}; author.surname = ""; author.name = ""; $ scope.authors.push（著者）;} else {警告（ "警告..."）} };すべての入力に必要なものを追加しますが...間違い - "TypeError：未定義の '$ valid'プロパティを読み取れません。多分ng-controller = "booksCtrl"の何か？ –

これについて質問を作成できますか？この質問とはちょっと違います。適切に答えるためにあなたがコードなどを持ってきた場所を見る必要があります。 – Brian

angularjs divの複製です。次のすべてのボタンは対応するdivを制御します

答えて

関連する問題