基於兩個輸入的AngularJS搜索條件

我正在設計一個應用程序來執行與數據庫相關的一些CRUD操作。作爲我的應用程序的一部分，我試圖基於兩個輸入實現搜索，一個是下拉/組合框，另一個是輸入。只要用戶輸入完成在文本中輸入文本然後點擊搜索，它應該獲取與該特定記錄相關的所有信息並將其填充到文本框中基於兩個輸入的AngularJS搜索條件

無法使用兩個輸入來處理搜索。任何幫助表示讚賞。

這是

var myapp = angular.module("myModule", []); 
 
myapp.controller("myController", function($scope){ 
 
\t 
 
\t var listProducts = [ 
 
\t \t { id: '100', name: "Macy", price: 200, quantity: 2 }, 
 
\t \t { id: '100', name: "Macy", price: 100, quantity: 1 }, 
 
\t \t { id: '101', name: "JCPenny", price: 400, quantity: 1 }, 
 
\t \t { id: '102', name: "Primark", price: 300, quantity: 3 }, 
 
\t \t { id: '103', name: "H&M", price: 600, quantity: 1 } 
 
\t ]; 
 
\t 
 
\t $scope.listProducts = listProducts; 
 
\t 
 
\t $scope.del = function(id){ 
 
\t \t var txt = confirm("Are you sure??") 
 
\t \t \t if (txt==true){ 
 
\t \t \t \t var index = getSelectedIndex(id); 
 
\t \t \t \t $scope.listProducts.splice(index,1); 
 
\t \t \t } 
 
\t \t 
 
\t }; 
 
\t 
 
\t $scope.selectEdit = function(id){ 
 
\t \t var index = getSelectedIndex(id); 
 
\t \t var product = $scope.listProducts[index]; 
 
\t \t $scope.id=product.id; 
 
\t \t $scope.name=product.name; 
 
\t \t $scope.price=product.price; 
 
\t \t $scope.quantity=product.quantity; 
 
\t }; 
 
\t 
 
// \t $scope.searchproduct= function(item){ 
 
// \t \t var product = 
 
// \t } 
 
\t 
 
\t function getSelectedIndex(id){ 
 
\t \t for(i=0; i<$scope.listProducts.length; i++) 
 
\t \t \t if($scope.listProducts[i].id == id) 
 
\t \t \t \t return i; 
 
\t \t return -1; 
 
\t } 
 
});

<!DOCTYPE html> 
 
<html ng-app="myModule"> 
 

 
    <head> 
 
    
 
    <script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="myController"> 
 
    ID: 
 
    <select ng-model=search> 
 
\t \t \t <option ng-repeat="products in listProducts">{{products.id}}</option> 
 
\t \t </select> 
 
\t \t 
 
\t \t Quantity: 
 
\t \t <input> 
 
\t \t <div> 
 
\t \t <button ng-click="selectEdit(search)">search</button> 
 
\t \t </div> 
 
\t \t <table> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <th>Edit Information </th> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>ID</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" ng-model="id"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Name</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" ng-model="name"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Price</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" ng-model="price"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Quantity</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" ng-model="quantity"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="button" value="Add" /> 
 
\t \t \t \t \t \t <input type="button" value="Save"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> \t 
 
\t \t </table> 
 
    </body> 
 

 
</html>

點擊這裏給我Plunker

https://plnkr.co/edit/KvVTvaCtPeFKJcPSnGYQ?p=preview

來源

2017-07-26 annie

你Plunker不工作。 –

@JPDolocanog改變了鏈接器。在此先感謝 – annie

您需要爲搜索參數的對象。您可以從search.id組合並輸入從文本輸入search.quantity

<select ng-model="search.id"> 
    <option ng-repeat="products in listProducts">{{products.id}}</option> 
</select> 
Quantity: 
<input type="text" ng-model="search.quantity">

存儲輸入在selectEdit功能你會被搜索對象進行過濾。

$scope.selectEdit = function(){ 
    var index = getSelectedIndex($scope.search); 
    ... 
}

而且getSelectedIndex看起來像這樣

function getSelectedIndex(search){ 
    for(i=0; i<$scope.listProducts.length; i++) 
     if($scope.listProducts[i].id == search.id && $scope.listProducts[i].quantity == search.quantity) 
      return i; 
    return -1; 
}

見plunker

來源

2017-07-27 01:53:52 davekr

我瞭解foreach，但我不能在功能selectEdit中進行必要的更改以顯示相應字段中的數據https://plnkr.co/edit/KvVTvaCtPeFKJcPSnGYQ?p=preview請幫助我使用該功能。在此先感謝 – annie

@annie更新了我的不定期使用常規'for'和鏈接的重擊 – davekr

數據未填充到字段中。在此先感謝 – annie

基於兩個輸入的AngularJS搜索條件

回答

相關問題