annie annie - 1 year ago 65
AngularJS Question

AngularJS search criteria based on two inputs

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

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

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

Answer Source

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

<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.

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

And getSelectedIndex will look like this

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download