<table class="table">
<thead>
<th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="selectAll()"></th>
<th> Name </th>
</thead>
<tr ng-repeat="x in items">
<td><input type='checkbox' ng-model="value2" ng-true-value="YES" ng-false-value="NO" ng-click="select($event,x.id)"
/></td>
<td>{{x.name}}</td>
</tr>
</tr>
</table>
How to I get all the item.id when I click "selectall()" checkbox ?
Also, Can you suggest me appropriate ng-model syntax for ng-repeat checkbox ?
Thanks,
Raja K
Take a look at this example, you can see how the checkbox values change,
while using checkbox use ng-change instead of ng-click
// the main (app) module
var myApp = angular.module("myApp", []);
// add a controller
myApp.controller("myCtrl", function($scope) {
$scope.value1 = "NO";
$scope.items = [{
id: 1,
check: "NO",
name: "A"
}, {
id: 2,
check: "NO",
name: "B"
}, {
id: 3,
check: "NO",
name: "C"
}, {
id: 4,
check: "NO",
name: "D"
}, {
id: 5,
check: "NO",
name: "E"
}, {
id: 6,
check: "NO",
name: "F"
}, {
id: 7,
check: "NO",
name: "G"
}, {
id: 8,
check: "NO",
name: "H"
}];
$scope.selectAll = function() {
angular.forEach($scope.items, function(elem) {
elem.check = $scope.value1;
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table class="table">
<thead>
<th>
<input type='checkbox' name='selectall' ng-true-value="YES" ng-false-value="NO" ng-model="value1" ng-change="selectAll()">{{value1}}
</th>
<th>Name</th>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>
<input type='checkbox' ng-model="x.check" ng-true-value="YES" ng-false-value="NO" ng-change="select($event,x.id)" /> {{x.check}}
</td>
<td>{{x.name}}</td>
</tr>
</tbody>
</table>
</body>
Dear,
Here it's just a helping ref. to your question. I've given a scenario for selecting all records. Hence Modify it according to you need.
<button ng-click="selectAll()">select all</button>
<div ng-repeat="item in items">
<label>
{{item.n}}:
<input type="checkbox" ng-model="selected[item.id]">
</label>
</div>
And in the controller, simply set all the items to be true in selected:
$scope.selected = {};
$scope.selectAll = function(){
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
$scope.selected[item.id] = true;
}
};
Thanks & Cheers
var myapp = angular.module('app', []);
myapp.controller('Ctrl', function ($scope) {
var vm = this;
vm.data = {
items: [
{id:1,name:"ali",selected: "NO"},
{id:2,name:"reza",selected: "NO"},
{id:3,name:"amir",selected: "NO"}
]
};
vm.value1 = false;
vm.selectAll = function($event){
var checkbox = $event.target;
var selected = "NO";
if(checkbox.checked)
{
selected = "YES";
}
else {
selected = "NO";
}
angular.forEach(vm.data.items, function(item) {
item.selected = selected;
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl as vm">
<table class="table">
<thead>
<th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="vm.selectAll($event)"></th>
<th> All </th>
</thead>
<tr ng-repeat="x in vm.data.items">
<td><input type='checkbox' ng-model="vm.data.items[$index].selected" ng-true-value="YES" ng-false-value="NO" ng-click="vm.select($event,x.id)"
/></td>
<td>{{x.name}}</td>
</tr>
</table>
</div>
Related
I want to make dynamic columns of a table and create a new object to save it in mongoDb.
I have first Array of Student as:
students = [{id: "1", name: "abc"},{id: "2", name: "def"},{id: "3", name: "hij"}]
and have second Array of Subjects as:
subjects = [{sName: "maths"},{sName: "science"}]
Here is the HTML
<div ng-app='t' ng-controller='test'>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th ng-repeat="subject in subjects">{{subject.sName}}</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in finalData track by $index">
<th><input type="text" ng-model="row.rollNo"/></th>
<th><input type="text" ng-model="row.fullName"></th>
<th ng-repeat="subject in subjects"><input type="text" ng-model="row.marks"></th>
<th>
<button ng-click="action($index)">
add/remove
</button></th>
</tr>
</tbody>
</table>
</div>
Here is the Controller
(function(){
var app = angular.module('t', []);
app.controller('test',
[
'$scope',
function($scope)
{
$scope.students = [{id: "1", name: "abc"},{id: "2", name: "def"},{id: "3", name: "hij"}]
$scope.subjects = [{sName: "maths"},{sName: "science"}]
$scope.finalData = new Array();
$scope.finalData.push({
icon : false
});
$scope.action=function(index){
if(index == $scope.finalData.length-1){
$scope.finalData[index].icon = true;
$scope.finalData.push({
icon : false
});
}else{
$scope.finalData.splice(index, 1);
}
};
}
]);
})();
The Output Looks like this.
The marks columns are repeating similar values. But i want one single finalObject to save my data.
Here is the jsFiddle of my problem https://jsfiddle.net/g8tn71tr/
The row subjects refer to the same NgModel row.marks which makes them have the same value.
You can solve it by making the ng-model refer to each of the subjects ng-model="row.marks[subject.sName]". This will result in that row.marks will become an object where each subject will be a key and the model will be in its value
(function(){
var app = angular.module('t', []);
app.controller('test',
[
'$scope',
function($scope)
{
$scope.students = [{id: "1", name: "abc"},{id: "2", name: "def"},{id: "3", name: "hij"}]
$scope.subjects = [{sName: "maths"},{sName: "science"}]
$scope.finalData = new Array();
$scope.finalData.push({
icon : false
});
$scope.action=function(index){
console.clear();
console.log($scope.finalData[index]);
if(index == $scope.finalData.length-1){
$scope.finalData[index].icon = true;
$scope.finalData.push({
icon : false
});
}else{
$scope.finalData.splice(index, 1);
}
};
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app='t' ng-controller='test'>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th ng-repeat="subject in subjects">{{subject.sName}}</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in finalData track by $index">
<th><input type="text" ng-model="row.rollNo"/></th>
<th><input type="text" ng-model="row.fullName"></th>
<th ng-repeat="subject in subjects"><input type="text" ng-model="row.marks[subject.sName]"></th>
<th>
<button ng-click="action($index)">
add/remove
</button></th>
</tr>
</tbody>
</table>
</div>
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
I am looking for help in creating a custom filter that will work on any table that has a search property.
So far, I can get the table to filter based on what is input into each column search bar, but I can't figure out how to implement a 'startsWith' for each column as well so that it will only find 'Florida' if you type 'Flor' or 'Fl', etc. instead of finding it when typing 'lor' or 'ida'.
I have been able to get just one column working with a custom filter, but lost on how to implement this for multiple columns.
Here is the plunkr example: http://plnkr.co/edit/CE3uhZmksiepmVL2bLNF?p=preview
Script:
var app = angular.module("stateManagement", []);
app.controller("myCtrl", ["$scope", myCtrl]);
function myCtrl($scope) {
$scope.names = [{
Name: "Florida",
Country: "USA"
}, {
Name: "Texas",
Country: "USA"
}]
$scope.state = '';
$scope.elements = [{
state: "Florida"
}, {
state: "Texas"
}];
}
app.filter('myfilter', function() {
function strStartsWith(str, prefix) {
return (str.toLowerCase() + "").indexOf(prefix.toLowerCase()) === 0;
}
return function(items, state) {
var filtered = [];
angular.forEach(items, function(item) {
if (strStartsWith(item.state, state)) {
filtered.push(item);
}
});
return filtered;
};
});
Html:
<body ng-app='stateManagement' ng-controller='myCtrl'>
<div class="col-md-12">
<table class="table table-responsive">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<th><input class="form-control"
type="text"
placeholder="Search..."
ng-model="search.Name"/>
</th>
<th><input class="form-control"
type="text"
placeholder="Search..."
ng-model="search.Country"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names | filter:search">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12">
<input ng-model="state">
<table id="hotels">
<tr data-ng-repeat="element in elements | myfilter:state">
<td>{{element.state}}</td>
</tr>
</table>
<br/>
</div>
</body>
Thank you in advance for helping!
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>