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()...).
Related
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>
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>
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>
I am new to angular and I am trying to learn, I have a table which I try to fill it with an array that I have:
<table ng-controller="repeatTest">
<tr>
<td>name</td>
<td>family name</td>
<td>score</td>
</tr>
<tr ng-repeat="item in list">
<td>{{ item.name }}</td>
<td>{{ item.familyName }}</td>
<td>{{ item.score }}</td>
</tr>
</table>
and my javascript code is as follow:
app.controller('repeatTest', function($scope, sharedService) {
$scope.list = [ {
name : 'hamed',
familyName : 'Minaee',
score : '100'
}, {
name : 'hamed',
familyName : 'Minaee',
score : '100'
} ];
});
which works perfectly fine but when I use service to hold he array that I have the table does not render, here is the javascript that I use which does not work:
app.service('sharedService', function() {
this.list = [ ];
});
app.controller('repeatTest', function($scope, sharedService) {
sharedService.list = [ {
name : 'ddd',
familyName : 'sss',
score : '100'
}, {
name : 'www',
familyName : 'aaa',
score : '100'
} ];
});
Can anyone help me? How can I make my code work with the second approach?
In angular, any values you wish to access in the view layer need to be attached to either the controller as "this" or to "$scope".
You set "sharedService.list" equal to a value, but that's not available to the view, so "list" will be undefined in your ng-repeat.
What you'd want to do in your controller is:
$scope.list = sharedService.list
and then define your list as:
this.list = [...some list here...]; in your service.
You have to add it to $scope. Often times the service is doing an AJAX call. See this Plunker for a working example: http://plnkr.co/edit/Yx6GYqnSLTzGD2TfB2p8?p=info
var app = angular.module("app", []);
app.service('sharedService', function() {
this.list = [{
name: 'ddd',
familyName: 'sss',
score: '100'
}, {
name: 'www',
familyName: 'aaa',
score: '100'
}];
});
app.controller('repeatTest', function($scope, sharedService) {
$scope.list = sharedService.list ;
});
And the HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js" data-require="angular.js#1.5.0" data-semver="1.5.0"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<table ng-controller="repeatTest">
<tr>
<td>name</td>
<td>family name</td>
<td>score</td>
</tr>
<tr ng-repeat="item in list">
<td>{{item.name}}</td>
<td>{{item.familyName}}</td>
<td>{{item.score}}</td>
</tr>
</table>
</body>
</html>
app.service('sharedService', function(){
this.list = [ {
name : 'ddd',
familyName : 'sss',
score : '100'
}, {
name : 'www',
familyName : 'aaa',
score : '100'
} ];
});
app.controller('repeatTest', function($scope, sharedService){
$scope.list = sharedService.list;
});
The simple approach is define data in service and use that service in controller and bind data using $scope.
<table ng-controller="repeatTest">
<tr>
<td>name</td>
<td>family name</td>
<td>score</td>
</tr>
<tr ng-repeat="item in list">
<td>{{ item.name }}</td>
<td>{{ item.familyName }}</td>
<td>{{ item.score }}</td>
</tr>
</table>