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
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
Related
I am new to angularjs ,i want to bind edit data on modal then submit it.
my controller.js
.controller("registration_listCtrl", ["$scope", "$http", function
($scope, $http) {
$scope.editlist = function(id){
$http({
method:'post',
url:'http://localhost/Angular_demo/admin/index.php/welcome/get_edit_data/'+ id
}).then(function success(response){
$scope.sid = parseInt(response['id']);
$scope.firstname = response["first_name"];
$scope.lastname = response['last_name'];
$scope.email = response['email'];
});
}
$scope.getUsers();
}])
When i click on edit button in table data will return on console but not bind in my modal.My return data is
0:
{id: "1", first_name: "dipti", last_name: "ranjan", email: "uiouio#ytry.yuy", password: "12345"}
But when i print response["first_name"] in console it shows undefined
Here is best practice for your question:
<!doctype html>
<html ng-app="crudapp">
<head>
<meta charset="UTF-8">
<title>AngularJS and CRUD</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-controller="registration_listCtrl">
<!-- Table to output data -->
<table cellpadding="5" cellspacing="0" border="1">
<thead>
<tr>
<th>AngularJS ID</th>
<th>SKU CODE</th>
<th>PRODUCT</th>
<th>PRICE</th>
<th>QUANTITY</th>
<th>OPTIONS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in listProducts">
<td>{{product.id = $index}}</td>
<td>{{product.sku}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.quantity}}</td>
<td>
DELETE
EDIT
</td>
</tr>
</tbody>
</table>
<h1>Product Information</h1>
<form name="commentForm" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<td>SKU</td>
<td>
<input type="text" ng-model="sku">
</td>
</tr>
<tr>
<td>Product 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> </td>
<td>
<input type="button" value="Add" ng-click="add()">
<input type="button" value="Save" ng-click="edit()">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var crudapp = angular.module('crudapp', []);
crudapp.controller('registration_listCtrl', function($scope){
<!-- Populate table with products data -->
$scope.listProducts = [
{sku:'SKU1', name:'Product Name 1', price:199, quantity: 50},
{sku:'SKU2', name:'Product Name 2', price:220, quantity: 100},
{sku:'SKU3', name:'Product Name 3', price:55, quantity: 25},
{sku:'SKU4', name:'Product Name 4', price:100, quantity: 50},
{sku:'SKU5', name:'Product Name 5', price:10, quantity: 1000}
];
<!-- Delete function -->
$scope.del = function(id){
var result = confirm('Are you sure?');
if (result===true){
var index = getSelectedIndex(id);
$scope.listProducts.splice(index, 1);
};
};
<!-- Edit and update row function -->
$scope.edit = function(){
var index = getSelectedIndex($scope.id);
$scope.listProducts[index].sku = $scope.sku;
$scope.listProducts[index].name = $scope.name;
$scope.listProducts[index].price = $scope.price;
$scope.listProducts[index].quantity = $scope.quantity;
};
<!-- Select the row of data and update the form function -->
$scope.selectEdit = function(id){
var index = getSelectedIndex(id);
var product = $scope.listProducts[index];
$scope.id = product.id;
$scope.sku = product.sku;
$scope.name = product.name;
$scope.price = product.price;
$scope.quantity = product.quantity;
};
<!-- Add a new product function -->
$scope.add = function(id){
$scope.listProducts.push({
sku:$scope.sku,
name:$scope.name,
price:$scope.price,
quantity:$scope.quantity
});
<!-- Resets the form -->
$scope.sku = '';
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
};
<!-- Function finds unique product data based on its id -->
function getSelectedIndex(id){
for(var i=0; i<$scope.listProducts.length; i++)
if($scope.listProducts[i].id==id)
return i;
return -1;
};
});
</script>
</body>
</html>
I have a form that is rendered inside of an HTML table using AngularJS, similar to:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="inputData" id="inputData" ng-submit="submit()">
<table class="table">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Head Office</th>
</tr>
<tr ng-repeat="company in companies">
<td>
<input type="text" ng-model="company.name" />
</td>
<td>
<input type="text" ng-model="company.employees" />
</td>
<td>
<input type="text" ng-model="company.headoffice" />
</td>
</tr>
</table>
<input type="submit"/>
</form>
</div>
</div>
Users can edit the values in the form. When the form is submitted, I'd like to get the $index of the row(s) that were edited. That way I can access the full row from the model via $scope.companies[$index] (which is going to get POSTed to a server).
I know I can check individual fields for the $dirty property. But is there a way I can retrieve the row number? Or better yet, a way I can retrieve all fields in the edited rows?
Here's a fiddle where, right now, I'm just highlighting the dirty fields using CSS: https://jsfiddle.net/jmg157/kzxeL0yw/2/
Thanks for any and all help!
You can try something like this ( using angular.equals) :
var app = angular.module("myApp", []);
app.controller("MyCtrl", ["$scope", function($scope) {
$scope.companies = [{
name: "Infosys Technologies",
employees: 125000,
headoffice: "Bangalore"
}, {
name: "Cognizant Technologies",
employees: 100000,
headoffice: "Bangalore"
}, {
name: "Wipro",
employees: 115000,
headoffice: "Bangalore"
}];
$scope.orginalCompanies = angular.copy($scope.companies);
$scope.submit = function() {
$scope.changedIndex = [];
if(angular.equals($scope.orginalCompanies, $scope.companies)){
console.log('NOthing is changed');
}else{
angular.forEach($scope.companies, function(value, key) {
if(!angular.equals(value, $scope.orginalCompanies[key])){
$scope.changedIndex.push(key);
}
});
console.log("changed Index:=>");
console.log($scope.changedIndex);
}
}
}]);
input.ng-dirty {
background-color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="inputData" id="inputData" ng-submit="submit()">
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
</tr>
<tr ng-repeat="company in companies">
<td>
<input type="text" ng-model="company.name" />
</td>
<td>
<input type="text" ng-model="company.employees" />
</td>
<td>
<input type="text" ng-model="company.headoffice" />
</td>
</tr>
</table>
<input type="submit"/>
</form>
</div>
</div>
You can simply use ng-change directive:
angular.module("myApp", []).controller("MyCtrl", ["$scope", function($scope) {
$scope.companies = [{
name: "Infosys Technologies",
employees: 125000,
headoffice: "Bangalore"
}, {
name: "Cognizant Technologies",
employees: 100000,
headoffice: "Bangalore"
}, {
name: "Wipro",
employees: 115000,
headoffice: "Bangalore"
}];
$scope.submit = function() {
console.log($scope.inputData);
}
$scope.logs = [];
$scope.logDirty = function(key, $index) {
var message = 'company[' + $index + '].' + key + 'is dirty';
if ($scope.logs.indexOf(message) == -1)
$scope.logs.push(message);
}
}]);
input.ng-dirty {
background-color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="inputData" id="inputData" ng-submit="submit()">
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
</tr>
<tr ng-repeat="company in companies" ng-init='parentIndex=$index'>
<td ng-repeat='(key, val) in company'>
<input ng-change='logDirty(key, parentIndex)' type="text" ng-model="company[key]" />
</td>
</tr>
</table>
<input type="submit" />
<ul ng-if='logs.length > 0'>
<li ng-repeat='log in logs'>{{log}}</li>
</ul>
</form>
</div>
</div>
I am kind of new to angular trying to develop an application with CRUD operations. i am trying to hold the value of a drop down for further usage and populate the data into the fields based on the selection.
Not able to populate the data into the fields based on the selection of the dropdown: if i use "product.id as product.name for product in listProducts" instead of ng-options="product.name for product in listProducts"
any help is appreciated thanks in advance
var myapp = angular.module("myModule", []);
myapp.controller("myController", function($scope){
var listProducts = [
{ id: '100', name: "Macy", price: 200, quantity: 2 },
{ 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;
});
<html ng-app="myModule">
<head>
<title> CRUD Operations </title>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
Here i am populating the data into the fields without holding the id as the value in the dropdown which is successfull
<div>
<select ng-model=search ng-options="product.name for product in listProducts">
</select>
<table>
<thead>
<tr>
<th>Edit Information </th>
</tr>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>
<input type="text" ng-model="search.id"/>
</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" ng-model="search.name"/>
</td>
</tr>
<tr>
<td>Price</td>
<td>
<input type="text" ng-model="search.price"/>
</td>
</tr>
</tbody>
</table>
</div>
if i hold the id as value display the name in the dropdown , not able to populate the data into the fields
<div>
<select ng-model=searchProduct ng-options="product.id as product.name for product in listProducts"></select>
<table>
<thead>
<tr>
<th>Edit Information </th>
</tr>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>
<input type="text" ng-model="searchProduct.id"/>
</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" ng-model="searchProduct.name"/>
</td>
</tr>
<tr>
<td>Price</td>
<td>
<input type="text" ng-model="searchProduct.price"/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Actually, you are almost there,
In your controller, simply assign an empty variable in your scope to hold the value selected:
var myapp = angular.module("myModule", []);
myapp.controller("myController", function($scope){
var listProducts = [
{ id: '100', name: "Macy", price: 200, quantity: 2 },
{ 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.selectedProduct = {};
});
and bind it to the select:
<select ng-model="selectedProduct" ng-options="product.name for product in listProducts">
Now, wherever you need the id, simply access it through $scope.selectedProduct.id
This is my code structure.Here I have multiple roles and region text boxes accordingly.Now if I entered wrong value then how can I clear that particular text box?
<tbody>
<tr ng-repeat="od in default_role">
<td>{{od.role}}</td>
<td>
<datalist id="all_region_list"> <option data-ng-repeat="or in list_region" value="{{or}}"> </datalist>
<input class="form-control" type="text" data-ng-model="region" list="all_region_list" placeholder="Region" title="Region" ng-keyup='get_region_values("Region");' ng-blur='location_value_check("Region",region,$index)'>
</td>
</tr>
</tbody>
You need to set the model's property (which is connected to the particular textbox) value to ''. So it will clear the textbox.
Demo:
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.list = [
{
name: 'name1'
},
{
name: 'name2'
},
{
name: 'name3'
},
{
name: 'name4'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<table>
<tr ng-repeat="item in list">
<td><input type="text" ng-model="item.name" placeholder="name" /></td>
<td><button ng-click="item.name = ''">Clear textbox</button></td>
<td>Model: {{item | json }}</td>
</tr>
</table>
</div>
If you want to just clear the textbox without changing the model:
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.list = [
{
name: 'name1'
},
{
name: 'name2'
},
{
name: 'name3'
},
{
name: 'name4'
}
];
angular.element(document).ready(function() {
$('button').click(function() {
$(this).parents('tr').first().find('input').val('');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<table>
<tr ng-repeat="item in list">
<td><input type="text" ng-model="item.name" placeholder="name" /></td>
<td><button>Clear textbox</button></td>
<td>Model: {{item | json }}</td>
</tr>
</table>
</div>
I want to do a search of a table with multiple textboxes. The user should be able to enter address in the address box and search the table my address, and enter city in the city search box and search the table by city. I can't get it to work, I'm getting the error message: Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Here's my html:
<table>
<thead>
<tr>
<th>
Address
</th>
<th>
City
</th>
</tr>
<tr>
<td>
<input ng-model="vm.search_address" />
</td>
<td>
<input ng-model="vm.search_city" />
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="search in searchesFound = ( vm.searches | filter: {address: search_address, city: search_city})">
<td>
{{ search.address }}
</td>
<td>
{{ search.city }}
</td>
</tr>
</tbody>
</table>
ANd here's my controller:
(function () {
angular.module('crm.ma')
.controller('AdvancedSearchCtrl', function () {
var vm = this;
vm.search_address = "";
vm.search_city = "";
vm.searchs = [
{
address: '202 This St',
city : 'Columbus'
},
{
address: '205 That St',
city: 'Dayton'
}
]
});
})();
Any clues on what I'm doing wrong?
You forgot the vm object. In your filter vm.search_city and vm.search_address should be used:
<tr ng-repeat="search in vm.searchs | filter: {address: vm.search_address, city: vm.search_city}">
Look this:
var app = angular.module('ngApp', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.smartphones = [
{brand: 'Apple', model: 'iPhone 4S', price: '999'},
{brand: 'Samsung', model: 'SIII', price: '888' },
{brand: 'LG', model: 'Optimus', price: '777'},
{brand: 'htc', model: 'Desire', price: '666'},
{brand: 'Nokia', model: 'N9', price: '555'}
];
$scope.search = function(){
angular.forEach($scope.smartphones, function(value, key) {
var brand = ($scope.queryBrand? $scope.queryBrand.toLowerCase():' ');
var model = ($scope.queryModel? $scope.queryModel.toLowerCase():' ');
value.show = (value.brand.toLowerCase().indexOf(brand) > -1 ||
value.model.toLowerCase().indexOf(model) > -1 || (brand == ' ' && model == ' '));
console.log(!brand && !model)
});
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet">
<div ng-app="ngApp" ng-controller="MainCtrl" class="container">
<input class="span4 pull-right" type="text" placeholder="Filter by brand" ng-model="queryBrand" ng-change="search()">
<input class="span4 pull-right" type="text" placeholder="Filter by model" ng-model="queryModel" ng-change="search()">
<div class="row">
<table id="results" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Brand</th>
<th>Model</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="smartphone in smartphones" ng-init="smartphone.show=true" ng-show="smartphone.show">
<td id="brand">{{smartphone.brand}}</td>
<td id="model">{{smartphone.model}}</td>
<td id="price">{{smartphone.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
</div>