Question

我有一个包含多个字段的表单。如何使用angularjs实现搜索？例如，我有以下页面：

<pre>
    <input name="title">
    <input name="isbn">
    <input name="author">
    <br/>
    <input type="submit">

    <!-- list the book information -->
    Title     Author     ISBN
</pre>

我希望根据用户对服务器搜索字段的输入显示底部列表。 注意：用户可以输入多个字段。如何在用户点击提交按钮时完成搜索？

我是否需要编写一个提交方法。如果是这样，我如何获取值并根据字段进行查询是否留空？

由于

Answer 1

如果你使用angularJS，你不需要提交，它将异步进行。只需在输入中添加ng模型，然后根据该模型过滤结果。像这样：

    <input name="title" ng-model="title">
    <input name="isbn" ng-model="isbn">
    <input name="author" ng-model="author>

<div filter: title | filter:isbn | filter:author >
   Title     Author     ISBN
</div>

Answer 2

像这样的东西

tableViewSelectionDidChange

在你的submitFunc中你会做一个$ http请求来获取你的数据并对其进行过滤，然后将结果存储在一个数组中，并在表单下方的视图中进行ng-repeat以迭代你的结果

Answer 3

基本实现应如下所示：

代码：

app.controller('SampleController', ['$scope', function($scope) {
  var search = function() {
    yourAjaxMethod({author: $scope.author, isbn: $scope.isbn, title: $scope.title}).then(function(list) {
      $scope.list = list;
    });
  }
  $scope.$watch('author', search);
  $scope.$watch('isbn', search);
  $scope.$watch('title', search);
  // the init loading
  search();
}])

标记：

<pre>
  <input name="title">
  <input name="isbn">
  <input name="author">
  <br/>


  <!-- list the book information -->
  <table>
   <tr>
     <th>Title</th>
     <th>Author</th>
     <th>ISBN</th>
   </tr>
   <tr ng-repeat="book in list">
     <td ng-bind="book.title"></td>
     <td ng-bind="book.author"></td>
     <td ng-bind="book.isbn"></td>
   </tr>
</table>

Angular JS实现搜索

3 个答案: