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

I am designing an application to do some CRUD operations related to the database. As part of my application i am trying to implement a search based on two inputs one is a dropdown/combo box and the other one is an input. As soon as user enters finishes entering the text into the text then hit search , it should fetch all the information related to that particular record and populate that in the textboxes

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

Not able to handle the search with both the inputs. Any help is appreciated.

无法使用两个输入处理搜索。任何帮助表示赞赏。

This is

这是

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>

Click here for my Plunker

点击这里查看我的Plunker

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

1 个解决方案

#1

You need an object for the search parameters. You can store input from the combo in search.id and input from the text input in search.quantity

您需要一个搜索参数对象。您可以在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">

In the selectEdit function you will filter by the search object.

在selectEdit函数中，您将按搜索对象进行过滤。

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

And getSelectedIndex will look like this

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;
}

See the plunker

看到plunker

#1