代码之家 › 专栏 › 技术社区 › annie

基于两个输入的AngularJS搜索标准

angularjs-filter gridview angularjs

annie · 技术社区 · 8 年前

我正在设计一个应用程序来执行与数据库相关的CRUD操作。作为我的应用程序的一部分,我试图实现基于两个输入的搜索,一个是下拉/组合框,另一个是输入。

无法处理两个输入的搜索。感谢您的帮助。

这是

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

1 回复 | 直到 8 年前

davekr 8 年前

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