将表单结果包含在“按书名排序”结果中

Question

用户可以填写一个表格来搜索一本书，然后该书的结果将填充在页面上。但是，我无法对那本书进行排序。你知道如何将那本书的结果添加到 $scope.books 对象吗？请看下面的代码： https://jsfiddle.net/dbxtcw9w/2
感谢您的宝贵时间！

<section id="App2" ng-app="form-input" ng-controller="ctrl">
<form id="form" ng-show="formDisplay" action="javascript:submit()" method="POST">  
  <summary> 
   <h5>Book Title:  </h5>
   <input type="text" name="title" ng-model="title" class="unique" placeholder="Enter Book Title" ></input> 
   <h5>Author:</h5>
   <input type="text" name="author" ng-model="author" class="unique" name="email" class='required' placeholder="Enter Author"></input> 
   <br>
   <button class="btn-md btn-info" style="margin-top:30px;" ng-click="submit()" >Submit</button>  
  </summary>
 </form> 
 <section class="row" id="user-input" ng-show="bookResult" style="margin-top:15px;"> 
 <summary class="col-md-12 col-sm-12 col-xs-12">  
   <div style="background-color:white; ">
     <h2> {{title}}</h2>
     <h4 style="color:grey;">By <span ng-bind="author"></span></h4> 
     <hr>
     <h5>FREE SAMPLE <span class="review" onclick="review(this)">REVIEW</span></h5>
    </div> 
  </summary>
</section>
<summary class="row book-component">
 <div  ng-repeat='x in books | orderBy: order' class="col-md-12 col-sm-12 col-xs-12" >
   <img class="thumbnail-image" > 
     <div> 
        <h2 ng-bind="x.title" class="title"></h2>
        <h4 ng-bind="x.author" class="author" style="color:grey;"></h4>
        <hr>
        <h5>FREE SAMPLE <span class="review" onclick="review(this)">REVIEW</span></h5>
     </div> 
 </div>
</summary> 
<button style="margin-top:30px" class="btn-lg btn-success" ng-click="changeOrder('title')">Sort by book title</button>
</section> 
<script>
    var app2 = angular.module('form-input', []);
    app2.controller('ctrl', function($scope) { 
    $scope.formDisplay=true;       
    $scope.bookResult=false;
    $scope.order = 'author';
    $scope.books=[
      {title:'Jani',author:'Norway'},
      {title:'Hege',author:'Sweden'} 
     ];       
    $scope.changeOrder = function (order) {
    $scope.order = order;
    };

    $scope.submit = function(){ 
          $scope.formDisplay = false; 
          $scope.bookResult = true;
    }
   });
  </script>

Answer 1

$scope.submit = function(){
  $scope.books.push(
    {
      title: $scope.title,
      author: $scope.author
    }
  );
};

现在，您设置了一个特殊的流程来支持添加一本新书。在视图中，它看起来像是被添加到数组中，但事实并非如此。您需要使用用户的输入创建一个新的“书”对象，然后将其推送到 $scope.books 数组中。由于 Angular 有 2 路数据绑定，将其推送到范围数组（模型）上将使其自动出现在视图中。现在也可以对其进行排序了。

您会注意到，您现在可以根据需要向列表中添加任意数量的新书。