Showing posts with label Filters. Show all posts

Wednesday, March 9, 2016

Angular | Filter |Limit no of Rows

Here we will see how we can limit the no of rows of a table.
we will give user an option to set how many rows he wants to see .

No. of rows to display<input type="number" ng-model="limit" step="1" min="0" max="50"/>

Now apply the filter :

<tr ng-repeat="Emp in Employee|filter:aa|limitTo:limit">

Tuesday, March 8, 2016

Angular| Filter Data

Earlier we saw some of the filter like sorting and formatting the data we shall now see how to filter data.

you just need 2 thing in addition to your display functionality
a) a search box
b) filter expression in angular
Note: This data is retrieved using WebApi and angular js ajax calls

code for the searchbox is as below

Search: <input type="search" name="EmployeeSearch" ng-model="aa" />

Now I wish to apply the filter to whole table so that it tries to match the criteria with any of the column data available

<tr ng-repeat="Emp in Employee|filter:aa">

<td>

{{Emp.EmployeeID}}

</td>

<td>{{Emp.EmployeeName}}</td>

<td>{{Emp.Email}}</td>

<td>{{Emp.RoleId}}</td>

<td>{{Emp.FunctionID}}</td>

<td>

<span ng-click="editBook(Emp)" class="btn btn-primary">Edit</span>

<span ng-click="deleteBook(Emp)" class="btn btn-danger">Delete</span>

</td>

</tr>

Tuesday, November 24, 2015

Angular- Custom Filter

The built-in filters cover many common use cases. but there are scenarios where we may have to create our own filters and use it as per the requirement which cannot be achieved using inbuilt filters .

Creating Custom filter to find StringLength

<body>

<div>
<form>

<input type = "text" ng-model="acc"/>

<div>
String Length is : {{acc|stringLength}}
</div>

</form>

</div>
<script>
angular.module('myapp', [])
.filter('stringLength',function()
{
return function(input){
return input.length;
}

}

);
</script>
</body>

Monday, November 23, 2015

Angular- Filters

Name:<input type ="text" ng-model="Name"/><br><br>

//Formats a number as a currency
<span>subtraction :{{num1-num2|currency}}</span><br><br>

//Converts the specified string to uppercase
<span>subtraction :{{Name|uppercase}}</span><br><br>

number

Formats a number as text.

<h1>Hello Plunker!</h1>
number :<input type ="text" ng-model='val'><br>
Default formatting: <span id='number-default'>{{val | number}}</span><br>
No fractions: <span>{{val | number:0}}</span><br>
Negative number: <span>{{-val | number:4}}</span>

orderBy

it is ordered alphabetically for strings and numerically for numbers.

<!DOCTYPE html>

<head>

</head>

<body>

<tr>

</tr>

</tr>

</table>

</div>

angular.module('myapp', [])

.controller('ageController',function($scope)

{

$scope.person=[{"name":"tom", age:30},{"name":"harry", age:25}]

});

</script>

</body>

</html>

My Technical Lessons

Menu