Angular JS執行器搜索

我有一個表單有多個字段。我如何使用angularjs實現搜索？例如，我有以下頁面：Angular JS執行器搜索

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

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

我想根據用戶在服務器的搜索字段上的輸入顯示底部列表。 注意：用戶可以在多個字段上輸入。如何在用戶點擊提交按鈕時完成搜索？

我需要寫一個提交方法嗎？如果是這樣，我怎麼能得到的價值觀，並根據字段留空或不查詢？

感謝

來源

2016-02-24 rnats

其中收集是目前尚不清楚。您是在問「如何向服務器發送正確的信息來爲我執行此搜索？」，或者「服務器向我發送了一系列書籍，如何將這些客戶端過濾器應用於該集合？」 – Orphid

如果您使用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>

來源

2016-02-24 22:23:35 MatTaNg

這可以假設數據可以通過http前端請求，而不需要任何形式的數據來發出請求，或者假設API足夠輕量，可以在每次按鍵時發出http請求，如果其中任何一種假設都是正確的這種方法是可以的，但是細節很少，因爲它沒有針對在列表結果中採用輸入驗證+1的方法，因爲缺乏與表單元素相關的努力 – danday74

像這樣

<form name='fred' novalidate='novalidate' ng-submit='submitFunc()'> 

    <input name='username' required='required' pattern='a-z'> 
    <input type='email'> 
    <input type='submit' ng-disabled='fred.$invalid'> 

</form>

在你submitFunc你會做的$ HTTP請求來獲取你的數據和過濾，然後存儲在數組中的結果，並做了一個NG -repeat在下面的表格視圖來迭代您的結果

來源

2016-02-24 22:32:54 danday74

基本實現應該是這樣的：

代碼：

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>

來源

2016-02-24 22:34:53 jalkoby

Angular JS執行器搜索

回答

相關問題