用户可以填写表格以搜索一本书，然后将书的结果填充到页面上。但是我无法对那本书进行排序。您知道如何将那本书的结果添加到$ 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>
$scope.submit = function(){
$scope.books.push(
{
title: $scope.title,
author: $scope.author
}
);
};
现在，您已经建立了特殊的流程来支持添加一本新书。在视图中，看起来好像它已添加到数组中，但实际上不是。您需要使用用户的输入创建一个新的“ book”对象，然后将其推入$ scope.books数组。由于angular具有2种方式的数据绑定，因此将其推入合并范围数组（模型）将使其自动出现在视图中。现在也可以对其进行排序。
您会注意到，现在可以将任意数量的新书添加到列表中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句