包括表单结果到结果'被书名排序“ [英] include the form result into the 'sort by book title' result

问题描述

有一个形式，其中用户可以填写，以搜索一本书，书的结果将被在页面上填充。但是我不能够到特定的书进行排序。你知道我怎么可以添加本书的结果到$ scope.books对象吗？请参阅下面的code：
https://jsfiddle.net/dbxtcw9w/2 结果
感谢您的时间！

 ＆lt;节ID =App2的NG-应用=表单输入NG控制器=CTRL＆GT;
＆LT;表ID =形式NG-秀=formDisplay行动=JavaScript的：提交（）方法=POST＆GT;
  ＆LT;总结＆gt;
   ＆LT;＆H5 GT;书名：LT; / H5＆GT;
   ＆LT;输入类型=文本名称=标题NG模型=称号级=独特的占位符=输入书名＆GT;＆LT; /输入＆GT;
   ＆LT;＆H5 GT;作者：＆LT; / H5＆GT;
   ＆LT;输入类型=文本名称=作者NG-模式=作者级=独一无二的名字=电子邮件类='需要'占位=输入作者＆GT;＆LT; /输入＆GT;
   ＆LT; BR＆GT;
   ＆LT;按钮类=BTN-MD BTN-INFO的风格=的margin-top：30PX; NG-点击=提交（）＆GT;提交＆LT; /按钮＆GT;
  ＆LT; /总结＆gt;
 ＆LT; /表及GT;
 ＆lt;节类=行ID =用户输入NG秀=bookResult的风格=的margin-top：15px的;＆GT;
 ＆LT;总结类=COL-MD-12 COL-SM-12 COL-XS-12＆GT;
   ＆LT; D​​IV的风格=背景色：白色;＆GT;
     ＆LT; H2＆GT; {{title}}会＆LT; / H＆GT;
     ＆LT; H4风格=颜色：灰色;＆GT;通过3-;跨度NG绑定=作者＆GT;＆LT; / SPAN＆GT;＆LT; / H4＆GT;
     ＆LT;小时＆GT;
     ＆LT;＆H5 GT;免费样品＆LT;跨度类=检讨的onclick =审查（本）＆GT;回顾及LT; / SPAN＆GT;＆LT; / H5＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; /总结＆gt;
＆LT; /节＆gt;
＆LT;总结类=行书分量＆GT;
 ＆LT;在书格NG重复='X |排序依据：为了阶级=COL-MD-12 COL-SM-12 COL-XS-12＆GT;
   ＆LT; IMG类=缩略图＆GT;
     ＆LT; D​​IV＆GT;
        ＆LT; H2 NG绑定=x.title级=标题＆GT;＆LT; / H＆GT;
        ＆LT; H4 NG绑定=x.author级=作者的风格=颜色：灰色;＆GT;＆LT; / H4＆GT;
        ＆LT;小时＆GT;
        ＆LT;＆H5 GT;免费样品＆LT;跨度类=检讨的onclick =审查（本）＆GT;回顾及LT; / SPAN＆GT;＆LT; / H5＆GT;
     ＆LT; / DIV＆GT;
 ＆LT; / DIV＆GT;
＆LT; /总结＆gt;
＆LT;按钮样式=的margin-top：30PX级=BTN-LG BTN-成功NG点击=changeOrder（'标题'）＆GT;排序书名＆LT; /按钮＆GT;
＆LT; /节＆gt;
＆LT;脚本＆GT;
    VAR APP2 = angular.module（'形式输入'，[]）;
    app2.controller（'CTRL'，函数（$范围）{
    $ scope.formDisplay = TRUE;
    $ scope.bookResult = FALSE;
    $ scope.order ='作家';
    $ scope.books = [
      {标题：贾尼，作者：挪威}，
      {标题：赫格隆，作者：瑞典}
     ];
    $ scope.changeOrder =功能（顺序）{
    $ scope.order =秩序;
    };    $ scope.submit =功能（）{
          $ scope.formDisplay = FALSE;
          $ scope.bookResult = TRUE;
    }
   }）;
  ＆LT; / SCRIPT＆GT;
 

解决方案

  $ scope.submit =功能（）{
  $ scope.books.push（
    {
      标题：$ scope.title，
      作者：$ scope.author
    }
  ）;
};
 

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

您会注意到，你现在就可以尽可能多的新书，只要你想添加到列表中。

There is a form in which the user can fill in, to search for a book, the result of the book will then be populated on the page. However I am not able to sort that particular book. Do you know how I can add the result of that book to the $scope.books object? Please see the code below: https://jsfiddle.net/dbxtcw9w/2
Thanks for your time!

<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>

解决方案

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

Right now you have a special flow set up to support adding a single new book. In the view it looks like its being added to the array but it isn't. You need to create a new 'book' object using the user's input, then push it onto the $scope.books array. Since angular has 2 way data binding, pushing it onto the scope array (the model) will make it automatically appear in the view. It will also now be able to be sorted.

You'll note that you'll now be able to add as many new books to the list as you want.

这篇关于包括表单结果到结果'被书名排序“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！