AngularJS 基于两个输入的搜索条件

Question

我正在设计一个应用程序来执行一些与数据库相关的 CRUD 操作。作为我的应用程序的一部分，我正在尝试基于两个输入实现搜索，一个是 dropdown/combo 框，另一个是输入。一旦用户输入完成将文本输入文本然后点击搜索，它应该获取与该特定记录相关的所有信息并将其填充到文本框中

无法同时处理这两种输入的搜索。感谢任何帮助。

这是

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

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

</html>

点击这里查看我的 Plunker

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

Answer 1

您需要一个对象作为搜索参数。您可以将来自组合的输入存储在 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

AngularJS 基于两个输入的搜索条件

AngularJS search criteria based on two inputs

angularjs

gridview

angularjs-filter