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!.

READ :  Angular Multipart/form-data File Upload using http post method

Make a HTML file and define markup

[php]

<br /> Example of AngularJS Grouping Nested ngRepeat Lists steps<br />

AngularJS Grouping Nested ngRepeat Lists Example

Close Group by:
user_gender
Hair

{{ c_group.label }}

  • {{ c_friend.user_name }}

[/php]

Make a js file and define scripting

[php]
http://code.jquery.com/jquery-1.9.1.min.js
http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js

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 = [];
}
);

READ :  vue-resource vue resource post data - AJAX requests Vuejs

[/php]

Example

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.

Leave a Comment