基于两个输入的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搜索条件

回答

相关问题