I am new in AngularJS. I have created pagination in AngularJS.
I have check and unchecked all functionality. When I click on check all it should be consider only current page rows checkbox. But now it select all
pages rows which I do not want.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myModule" ng-controller="myController">
<input type="text" class="form-control" placeholder="Filter..." ng-model="query">
<table>
<tr>
<th>
<input id="all" class="styled" type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>
</th>
<th class="col-sm-2">First Name</th>
<th class="col-sm-2">Last Name</th>
<th class="col-sm-4">Email Id</th>
</tr>
<tr ng-repeat="item in filterData = (totalItems| filter : search) | limitTo:10:10*(page-1)">
<td><input id="member1" class="styled" type="checkbox" ng-model="item.Selected"></td>
<td class="col-sm-2 text-center">{{item.itemName}}</td>
<td class="col-sm-2 text-center">{{item.itemcity}}</td>
<td class="col-sm-4 text-center">{{item.quantity}}</td>
</tr>
</table>
<uib-pagination max-size="maxSize" boundary-links="true" class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
ng-change="pageChanged()" previous-text="‹" next-text="›" items-per-page=10></uib-pagination>
</body>
<script>
// Code goes here
var myModule = angular.module('myModule', ["ui.bootstrap"]);
myModule.controller('myController', function($scope) {
$scope.page = 1;
$scope.totalItems = [ {itemName: "Tom", itemcity: "pune", quantity : "11"},
{itemName: "Tim", itemcity: "dhule", quantity : "21"},
{itemName: "Tum", itemcity: "chalis", quantity : "33"},
{itemName: "Tam", itemcity: "akola", quantity : "54"},
{itemName: "Tem", itemcity: "jamner", quantity : "67"},
{itemName: "Tiem", itemcity: "nashik", quantity : "87"},
{itemName: "Pum", itemcity: "mumbai", quantity : "98"},
{itemName: "Pum", itemcity: "mumbai", quantity : "82"},
{itemName: "Pum", itemcity: "mumbai", quantity : "79"},
{itemName: "Pum", itemcity: "mumbai", quantity : "100"},
{itemName: "Pum", itemcity: "mumbai", quantity : "51"}
];
$scope.displayItems = $scope.totalItems.slice(0, 10);
$scope.pageChanged = function() {
var startPos = ($scope.page - 1) * 10;
//$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
console.log($scope.page);
};
$scope.search = function (row) {
return !!((row.itemcity.indexOf($scope.query || '') !== - 1 || row.quantity.indexOf($scope.query || '') !== - 1));
};
var getAllSelected = function () {
var selectedItems = $scope.totalItems.filter(function (item) {
return item.Selected;
});
return selectedItems.length === $scope.totalItems.length;
}
var setAllSelected = function (value) {
angular.forEach($scope.totalItems, function (item) {
item.Selected = value;
});
}
$scope.allSelected = function (value) {
if (value !== undefined) {
return setAllSelected(value);
} else {
return getAllSelected();
}
}
});
</script>
</html>
Related
I'm trying to do strict and progressive search on same fields in 2 different ways. That is when filter through drop down it should to a strict search and through input search it should do a progressive search. I tried to do it using <tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}"> but is giving some error, Its not working.
Please check the bellow code and help me to solve this issue
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<select id="fieldDropdownHtml" ng-model="fieldSelected" ng-options="x.name for x in names" ng-change="searchOnField()">
<option value=""></option>
</select>
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr>
<td><p><input type="text" ng-model="name" ng-disabled="disablese"></p>
<td><p><input type="text" ng-model="country"></p>
</td>
</tr>
<tr ng-repeat="x in names | filter:{name:name||dropdownFieldName, country:country}">
<!--tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}" -->
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.disablese = false;
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Jani1',country:'England'},
{name:'Jani',country:'Norway'}
];
$scope.searchOnField = function() {
var e = document.getElementById("fieldDropdownHtml");
var strUser = e.options[e.selectedIndex].text;
angular.forEach($scope.names, function(dsElement) {
if (dsElement.name === strUser) {
$scope.dropdownFieldName = dsElement.name;
console.log($scope.dropdownFieldName);
}
if(document.getElementById('fieldDropdownHtml').selectedIndex == 0){
$scope.dropdownFieldName= undefined;
}
if(document.getElementById('fieldDropdownHtml').selectedIndex != 0){
$scope.disablese = true;
$scope.name = "";
}
else{
$scope.disablese = false;
}
});
}
});
</script>
</body>
</html>
Additional to Allabakash answer, you can use this code to your controller to make it simpler and minimize vanilla JavaScript codes:
angular
.module('myApp', [])
.controller('namesCtrl', function ($scope) {
$scope.disablese = false;
$scope.names = [
{ name: 'Jani', country: 'Norway' },
{ name: 'Carl', country: 'Sweden' },
{ name: 'Margareth', country: 'England' },
{ name: 'Hege', country: 'Norway' },
{ name: 'Joe', country: 'Denmark' },
{ name: 'Gustav', country: 'Sweden' },
{ name: 'Birgit', country: 'Denmark' },
{ name: 'Jani1', country: 'England' },
{ name: 'Jani', country: 'Norway' }
];
$scope.searchOnField = function () {
if ($scope.fieldSelected) {
$scope.dropdownFieldName = $scope.fieldSelected.name;
$scope.name = null;
$scope.disablese = true;
} else {
$scope.dropdownFieldName = undefined;
$scope.disablese = false;
}
};
});
You can achieve this by separating filters like below.
ng-repeat="x in names | filter:{name:name||dropdownFieldName}: disablese | filter: { country:country }"
Hope this helps.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<select id="fieldDropdownHtml" ng-model="fieldSelected" ng-options="x.name for x in names" ng-change="searchOnField()">
<option value=""></option>
</select>
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr>
<td><p><input type="text" ng-model="name" ng-disabled="disablese"></p>
<td><p><input type="text" ng-model="country"></p>
</td>
</tr>
<tr ng-repeat="x in names | filter:{name:name||dropdownFieldName}: disablese | filter: { country:country }">
<!--tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}" -->
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.disablese = false;
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Jani1',country:'England'},
{name:'Jani',country:'Norway'},
{name:'Jani',country:'Harway'}
];
$scope.searchOnField = function() {
var e = document.getElementById("fieldDropdownHtml");
var strUser = e.options[e.selectedIndex].text;
angular.forEach($scope.names, function(dsElement) {
if (dsElement.name === strUser) {
$scope.dropdownFieldName = dsElement.name;
console.log($scope.dropdownFieldName);
}
if(document.getElementById('fieldDropdownHtml').selectedIndex == 0){
$scope.dropdownFieldName= undefined;
}
if(document.getElementById('fieldDropdownHtml').selectedIndex != 0){
$scope.disablese = true;
$scope.name = "";
}
else{
$scope.disablese = false;
}
});
}
});
</script>
</body>
</html>
Now I am trying to select box with disabled.
When $shop.products.product[i].productId is changed by selectBox, I want that value disabled in select box option.
for example, if i select 3 in select box on second row, then select box option 1,3 are disabled.
so i register $watch witch resync isDisabled field when $shop.products[i].productId is changed.
i don't know why $watch is no calling. help me please.
// Code goes here
angular.module("myApp")
.controller("myCtrl", function($scope) {
$scope.shop = {
"id" : 'shop1',
"products" : [
{"productId" : 1,"desc" : 'product1'},
{"productId" : 2,"desc" : 'product2'}
]
};
$scope.allSelectBoxItems = [
{"id" : 1, "isDisabled" : true},
{"id" : 2, "isDisabled" : true},
{"id" : 3, "isDisabled" : false},
{"id" : 4, "isDisabled" : false}
];
$scope.addWatcher = function(index){
console.log('register watcher to ' + index);
$scope.$watch('shop.product[' + index + '].productId', function(newValue, oldValue){
console.log('watcher envoked');
if (newValue != oldValue) {
var selected = $scope.shop.products.map(function (product) {
return product.productId;
});
for (var i = 0; i < $scope.allSelectBoxItems.length; i++) {
var isSelected = selected.includes($scope.allSelectBoxItems[i].productId);
console.log(isSelected);
$scope.allSelectBoxItems.isDisabled = isSelected;
}
}
});
}
angular.forEach($scope.shop.products, function(value, index){
$scope.addWatcher(index);
});
$scope.addProduct = function(){
var nextProductId = $scope.shop.products.length + 1;
var newProduct = {"productId" : nextProductId ,"desc" : 'product' + nextProductId};
$scope.shop.products.push(newProduct);
$scope.addWatcher(nextProductId - 1);
}
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script>
angular.module("myApp", ['ngAnimate', 'ui.bootstrap'])
</script>
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<div>
<table class="table">
<tbody>
<tr>
<th>id</th>
<td>{{shop.id}}</td>
</tr>
<tr>
<td>
products
<br>
<button type="button" class="btn btn-default" ng-click="addProduct()"><span class="glyphicon glyphicon-plus" aria-hidden="true" style="margin-right:4px"></span>add product</button>
</td>
<td>
<table class="table">
<tbody>
<tr>
<td>producId</td>
<td>desc</td>
</tr>
<tr ng-repeat="product in shop.products">
<td>
<select ng-model="product.productId" ng-options="selectBoxItem.id as selectBoxItem.id disable when selectBoxItem.isDisabled for selectBoxItem in allSelectBoxItems"></select>
</td>
<td>
{{product.desc}}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In below example when i search by 'swa' string I'll get 'swap-dhule-21' row and when i search by 'Swa' I'll get 'Swati-jamner-67' row.I have put
my code over here for reference for problem understanding.
I have write search function.here I want case insensitive search
when i search by either 'swa' or 'Swa' I should get both
row i.e 'swap-dhule-21' and 'Swati-jamner-67'.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myModule" ng-controller="myController">
<input type="text" class="form-control" placeholder="Filter..." ng-model="query">
<table>
<tr>
<th>
<input id="all" class="styled" type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>
</th>
<th class="col-sm-2">First Name</th>
<th class="col-sm-2">Last Name</th>
<th class="col-sm-4">Email Id</th>
</tr>
<tr ng-repeat="item in filterData = (totalItems| filter : search) | limitTo:10:10*(page-1)">
<td><input id="member1" class="styled" type="checkbox" ng-model="item.Selected"></td>
<td class="col-sm-2 text-center">{{item.itemName}}</td>
<td class="col-sm-2 text-center">{{item.itemcity}}</td>
<td class="col-sm-4 text-center">{{item.quantity}}</td>
</tr>
</table>
<uib-pagination max-size="maxSize" boundary-links="true" class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
ng-change="pageChanged()" previous-text="‹" next-text="›" items-per-page=10></uib-pagination>
</body>
<script>
// Code goes here
var myModule = angular.module('myModule', ["ui.bootstrap"]);
myModule.controller('myController', function($scope) {
$scope.page = 1;
$scope.totalItems = [ {itemName: "Tom", itemcity: "pune", quantity : "11"},
{itemName: "swap", itemcity: "dhule", quantity : "21"},
{itemName: "ravi", itemcity: "chalis", quantity : "33"},
{itemName: "rajan", itemcity: "akola", quantity : "54"},
{itemName: "Swati", itemcity: "jamner", quantity : "67"},
{itemName: "Tushar", itemcity: "nashik", quantity : "87"},
{itemName: "pratik", itemcity: "mumbai", quantity : "98"},
{itemName: "dfds", itemcity: "mumbai", quantity : "82"},
{itemName: "jfghj", itemcity: "mumbai", quantity : "79"},
{itemName: "fg", itemcity: "mumbai", quantity : "100"},
{itemName: "fdgf", itemcity: "mumbai", quantity : "51"}
];
$scope.displayItems = $scope.totalItems.slice(0, 10);
$scope.pageChanged = function() {
var startPos = ($scope.page - 1) * 10;
//$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
console.log($scope.page);
};
$scope.search = function (row) {
return !!((row.itemcity.indexOf($scope.query || '') !== - 1 || row.quantity.indexOf($scope.query || '') !== - 1));
};
});
</script>
</html>
You can convert everything to upperCase or lowerCase in order to achieve a case insensitive search
$scope.search = function (row) {
return !!((row.itemcity.toUpperCase().indexOf($scope.query.toUpperCase() || '') !== - 1 || row.quantity.indexOf($scope.query || '') !== - 1));
};
The String.indexOf() function is case sensitive. See the MDN documentation for more information.
You could adapt your test function to use a regex that is case insensitive:
var someRegex = /hello/i;
someRegex('Hello').test(); //true
However the angular way is to apply a filter to an object property, I think this SO answer might help: How to filter by object property in angularJS
edit: almost forgot, if you are looking for a fast fix you can lowercase both the test and the string to search before doing the comparison. row.itemcity.toLowerCase().indexOf($scope.query.toLowerCase()...).
Below is snippset,
I want to set the value of balance column based on the entered Amt in Entered Amt column.
I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Amt" : "500",
},
{
"Amt" : "800",
},
{
"Amt" : "1580",
},
{
"Amt" : "1122",
}
]
$scope.value=function(d)
{
//How set the value of balace amout by subtrating Amt-Entered Amt.
//I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
</tr>
<tr ng-repeat="x in records">
<td>{{x.Amt}}</td>
<td>{{balance}}</td>
<td><input type="text" ng-model="d" ng-change="value(d)"></td>
</tr>
</table>
</body>
</html>
You can have the balance in your x object.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Amt" : "500",
},
{
"Amt" : "800",
},
{
"Amt" : "1580",
},
{
"Amt" : "1122",
}
]
$scope.value=function(d, x)
{
//How set the value of balace amout by subtrating Amt-Entered Amt.
//I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
x.balance = x.Amt - d;
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
</tr>
<tr ng-repeat="x in records">
<td>{{x.Amt}}</td>
<td>{{x.balance}}</td>
<td><input type="text" ng-model="d" ng-change="value(d, x)"></td>
</tr>
</table>
</body>
</html>
Here is updated code
HTML
<div ng-app>
<h2>Todo</h2>
<div>
<table ng-controller="TodoCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
</tr>
<tr ng-repeat="(key,x) in records">
<td>{{x.Amt}}</td>
<td><input type="text" readonly ng-model="balance[$index]"></td>
<td><input type="text" ng-model="d" ng-change="value(x,d,$index)"></td>
</tr>
</table>
</div>
</div>
JS
function myCtrl($scope) {
$scope.balance = {};
$scope.records = [
{
"Amt" : "500",
},
{
"Amt" : "800",
},
{
"Amt" : "1580",
},
{
"Amt" : "1122",
}
]
$scope.value=function(obj,val,key)
{
$scope.balance[key] = parseInt(obj.Amt) - parseInt(val);
//How set the value of balace amout by subtrating Amt-Entered Amt.
//I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
}
}
I'm attempting to setup a clickable table column header that sort Ascending when first clicked, and Descending when clicked again. My ascending sort is working fine, but I'm not sure how to setup an expression within my OrderBy to sort Descending
My setup thus far:
Table html has something like
<th ng-click="sort('LastName')">Last Name</th>
My sort method looks like
scope.sort = function (columnName) {
if (angular.isDefined(scope.filter)) {
if (scope.filter.SortColumn == columnName) {
scope.filter.SortColumn = columnName;
scope.filter.SortDirection = scope.filters.SortDirection == "Asc" ? "Desc" : "Asc";
} else {
scope.filter.SortColumn = columnName;
scope.filter.SortDirection = "Asc";
}
}
};
And my ng-repeat looks as follows
<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn">
How can I get the SortDirection to factor into the orderBy?
To simply reverse you'd change it to this:
<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn : true">
It'd be best if you used a boolean in your controller, but this should work too:
<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn : filter.SortDirection === 'Desc'">
And just for fun, here's how I do sorting with filtering in my tables.
Controller:
$scope.search = { query: ''};
$scope.sort = { field: 'defaultField', descending: true};
$scope.order = function(newValue) {
if(newValue === $scope.sort.field) {
$scope.sort.descending = !$scope.sort.descending;
} else {
$scope.sort = {field: newValue, descending: false};
}
};
$scope.filteredDocuments = function() {
var a = $filter('filter')($scope.documents, {$:$scope.search.query});
var b = $filter('orderBy')(a, $scope.sort.field, $scope.sort.descending);
return b;
};
A search box for filtering:
<input type="text" ng-model="search.query">
A column header:
<th nowrap>
<a href ng-click="order('size')">Size </a>
<i ng-show="sort.field === 'size' && !sort.descending" class="fa fa-sort-amount-asc"></i>
<i ng-show="sort.field === 'size' && sort.descending" class="fa fa-sort-amount-desc"></i>
</th>
The row binding:
<tr ng-repeat="d in filteredDocuments()" >
A simplified version of the above answer:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Click the table headers to change the sorting order:</p>
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')" >Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy:mySortOrder">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.sorts={};
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
if(x in $scope.sorts) {
$scope.sorts[x]=!$scope.sorts[x];
} else {
$scope.sorts[x]=false;
}
$scope.mySortOrder=$scope.sorts[x];
}
});
</script>
</body>
</html>