AngularJS Nested ng-repeat with Grouping Lists
AngularJS Nested ng-repeat with Grouping Lists
In this Post We Will Explain About is AngularJS Nested ng-repeat with Grouping Lists With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to javascript – AngularJS nested ng-repeat with grouped lists
Example
In this post we will show you Best way to implement AngularJS Nested ng-repeat with Grouping Lists, hear for Grouping Nested ngRepeat Lists In AngularJSwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Make a HTML file and define markup
<!doctype html>
<html ng-app="liveApp" ng-controller="liveCtrl">
<head>
<meta charset="utf-8" />
<title>
Example of AngularJS Grouping Nested ngRepeat Lists steps
</title>
</head>
<body>
<h2>
AngularJS Grouping Nested ngRepeat Lists Example
</h2>
<p>
Close Group by:
<a ng-click="close_groupBy( 'user_gender' )">user_gender</a> -
<a ng-click="close_groupBy( 'hobbies' )">Hair</a>
</p>
<div ng-repeat="c_group in user_groups">
<h2>
{{ c_group.label }}
</h2>
<ul>
<li ng-repeat="c_friend in c_group.close_friends">
{{ c_friend.user_name }}
</li>
</ul>
</div>
</body>
</html>
Make a js file and define scripting
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"> </script>
<script type="text/javascript">
var liveApp = angular.module( "liveApp", [] );
liveApp.controller(
"liveCtrl",
function( $scope, $timeout ) {
function sortOn( collection, user_name ) {
collection.sort(
function( a, b ) {
if ( a[ user_name ] <= b[ user_name ] ) {
return( -1 );
}
return( 1 );
}
);
}
$scope.close_groupBy = function( params ) {
$scope.user_groups = [];
sortOn( $scope.close_friends, params );
var live_group_val = "_INVALID_GROUP_VALUE_";
for ( var i = 0 ; i < $scope.close_friends.length ; i++ ) {
var c_friend = $scope.close_friends[ i ];
if ( c_friend[ params ] !== live_group_val ) {
var c_group = {
label: c_friend[ params ],
close_friends: []
};
live_group_val = c_group.label;
$scope.user_groups.push( c_group );
}
c_group.close_friends.push( c_friend );
}
};
$scope.close_friends = [
{
user_name: "dinesh",
user_gender: "Male",
hobbies: "hockey"
},
{
user_name: "George dinesh",
user_gender: "Male",
hobbies: "hockey"
},
{
user_name: "nivrut",
user_gender: "Male",
hobbies: "hockey"
},
{
user_name: "Roshani",
user_gender: "Male",
hobbies: "cricket"
},
{
user_name: "ramjuda",
user_gender: "Female",
hobbies: "chess"
},
{
user_name: "Dhirubha",
user_gender: "Female",
hobbies: "cricket"
}
];
$scope.user_groups = [];
}
);
</script>
I hope you have Got What is ng-repeat group by filter angular 6 And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.
Angular Autocomplete Textbox PHP MySQLi
Vue js Event Handling custom components and methods
