到目前为止，我得到了一些帮助。我只需要更进一步来实现我的目标。我想按照当前通过ng-click操作传递的属性对数据进行分组。我希望在页面加载或刷新时完成此操作。我如何从下面的代码中实现这一目标？如果有更好的方法来实现我的目标，请提出建议。感谢。
<!doctype html>
<html ng-app="Demo" ng-controller="DemoController">
<head>
<meta charset="utf-8" />
<title>
Grouping Nested ngRepeat Lists In AngularJS
</title>
</head>
<body>
<h1>
Grouping Nested ngRepeat Lists In AngularJS
</h1>
<p>
Group by:
<a ng-click="groupBy( 'brandName' )">Brand Name</a> -
<a ng-click="groupBy( 'hair' )">Hair</a>
</p>
<!-- BEGIN: Outer ngRepeat. -->
<div class="col s12" ng-repeat="group in groups" >
<ul class="collapsible popout" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<a href="#">
<img ng-src="{{group.brandLogo}}" alt="" class="circle responsive-img activator card-profile-image2" onerror="this.src='../../assets/images/backgrounds/cj_avatar.jpg'">
</a>
<p>Brand Name: {{ group.label }}</p>
</div>
<div class="collapsible-body" ng-repeat="camp in group.camps">
<ul class="collection">
<li class="collection-item">
<div class="row">
<div class="col s4 m2 center-align">
{{camp.campID}}
</div>
<div class="col s4 m3 center-align">
<b>{{camp.campName}}</b>
</div>
<div class="col s4 m2 center-align">
{{camp.campBudget}}
</div>
<div class="col s4 m1 center-align">
{{camp.campHits}}
</div>
<div class="col s4 m2 center-align">
{{camp.campDuration}}
</div>
<div class="col s4 m2 right-align">
<i class="material-icons ">insert_chart</i>
<i class="material-icons">content_copy</i>
<i class="material-icons ">delete_forever</i>
<i class="material-icons">more_vert</i>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- END: Outer ngRepeat. -->
<!-- Load jQuery and AngularJS from the CDN. -->
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.9.1.min.js">
</script>
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
<!-- Load the app module and its classes. -->
<script type="text/javascript">
// Define our AngularJS application module.
var demo = angular.module( "Demo", [] );
// -------------------------------------------------- //
// -------------------------------------------------- //
// I am the main controller for the application.
demo.controller(
"DemoController",
function( $scope, $timeout ) {
// -- Define Controller Methods. ------------ //
// I sort the given collection on the given property.
function sortOn( collection, brandName ) {
collection.sort(
function( a, b ) {
if ( a[ brandName ] <= b[ brandName ] ) {
return( -1 );
}
return( 1 );
}
);
}
// -- Define Scope Methods. ----------------- //
// I group the friends list on the given property.
$scope.groupBy = function( attribute ) {
// First, reset the groups.
$scope.groups = [];
// Now, sort the collection of friend on the
// grouping-property. This just makes it easier
// to split the collection.
sortOn( $scope.camps, attribute );
// I determine which group we are currently in.
var groupValue = "_INVALID_GROUP_VALUE_";
// As we loop over each friend, add it to the
// current group - we'll create a NEW group every
// time we come across a new attribute value.
for ( var i = 0 ; i < $scope.camps.length ; i++ ) {
var camp = $scope.camps[ i ];
// Should we create a new group?
if ( camp[ attribute ] !== groupValue ) {
var group = {
label: camp[ attribute ],
camps: []
};
groupValue = group.label;
$scope.groups.push( group );
}
// Add the friend to the currently active
// grouping.
group.camps.push( camp );
}
};
// -- Define Scope Variables. --------------- //
// I am the raw collection of friends.
$scope.camps = [
{brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:032145, campName:"Y3 Twi Kor", campBudget:500, campHits:"7k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:639885, campName:"X Bundle", campBudget:900, campHits:"6.2k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:857745, campName:"One Ghana", campBudget:1000, campHits:"9k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:795554, campName:"Free Bonto", campBudget:1500, campHits:"8.1k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:722957, campName:"Anajo Y3 D3", campBudget:650, campHits:"1.2k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:769855, campName:"Y3n Ko Nkoa", campBudget:780, campHits:"6.4k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:742896, campName:"Drink for life", campBudget:7000, campHits:"3.8k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:087759, campName:"Pure as Spirit", campBudget:910, campHits:"1.7k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:085997, campName:" Nourish your thirst", campBudget:1200, campHits:"9.2k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:398745, campName:"Fountain of life", campBudget:9800, campHits:"8.5k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:297556, campName:" Spring of Youth", campBudget:250, campHits:"4k", campDuration:"15 Days", campDesc:""}
];
// I am the grouped collection. Each one of these
// will contain a sub-collection of friends.
$scope.groups = [];
}
);
</script>
</body>
</html>
答案 0 :(得分：0)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="Demo" ng-controller="DemoController">
<head>
<meta charset="utf-8" />
<title>
Grouping Nested ngRepeat Lists In AngularJS
</title>
</head>
<body>
<h1>
Grouping Nested ngRepeat Lists In AngularJS
</h1>
<p>
Group by:
<a ng-click="groupBy( 'brandName' )">Brand Name</a> -
<a ng-click="groupBy( 'hair' )">Hair</a>
</p>
<!-- BEGIN: Outer ngRepeat. -->
<div class="col s12" ng-repeat="group in groups" >
<ul class="collapsible popout" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<a href="#">
<img ng-src="{{group.brandLogo}}" alt="" class="circle responsive-img activator card-profile-image2" onerror="this.src='../../assets/images/backgrounds/cj_avatar.jpg'">
</a>
<p>Brand Name: {{ group.label }}</p>
</div>
<div class="collapsible-body" ng-repeat="camp in group.camps">
<ul class="collection">
<li class="collection-item">
<div class="row">
<div class="col s4 m2 center-align">
{{camp.campID}}
</div>
<div class="col s4 m3 center-align">
<b>{{camp.campName}}</b>
</div>
<div class="col s4 m2 center-align">
{{camp.campBudget}}
</div>
<div class="col s4 m1 center-align">
{{camp.campHits}}
</div>
<div class="col s4 m2 center-align">
{{camp.campDuration}}
</div>
<div class="col s4 m2 right-align">
<i class="material-icons ">insert_chart</i>
<i class="material-icons">content_copy</i>
<i class="material-icons ">delete_forever</i>
<i class="material-icons">more_vert</i>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- END: Outer ngRepeat. -->
<!-- Load jQuery and AngularJS from the CDN. -->
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.9.1.min.js">
</script>
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
<!-- Load the app module and its classes. -->
<script type="text/javascript">
// Define our AngularJS application module.
var demo = angular.module( "Demo", [] );
// -------------------------------------------------- //
// -------------------------------------------------- //
// I am the main controller for the application.
demo.controller(
"DemoController",
function( $scope, $timeout ) {
// -- Define Controller Methods. ------------ //
// I sort the given collection on the given property.
function sortOn( collection, brandName ) {
collection.sort(
function( a, b ) {
if ( a[ brandName ] <= b[ brandName ] ) {
return( -1 );
}
return( 1 );
}
);
}
// -- Define Scope Methods. ----------------- //
// I group the friends list on the given property.
$scope.groupBy = function( attribute ) {
// First, reset the groups.
$scope.groups = [];
// Now, sort the collection of friend on the
// grouping-property. This just makes it easier
// to split the collection.
sortOn( $scope.camps, attribute );
// I determine which group we are currently in.
var groupValue = "_INVALID_GROUP_VALUE_";
// As we loop over each friend, add it to the
// current group - we'll create a NEW group ever
// time we come across a new attribute value.
for ( var i = 0 ; i < $scope.camps.length ; i++ ) {
var camp = $scope.camps[ i ];
// Should we create a new group?
if ( camp[ attribute ] !== groupValue ) {
var group = {
label: camp[ attribute ],
camps: []
};
groupValue = group.label;
$scope.groups.push( group );
}
// Add the friend to the currently active
// grouping.
group.camps.push( camp );
}
};
// -- Define Scope Variables. --------------- //
// I am the raw collection of friends.
$scope.camps = [
{brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:032145, campName:"Y3 Twi Kor", campBudget:500, campHits:"7k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:639885, campName:"X Bundle", campBudget:900, campHits:"6.2k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:857745, campName:"One Ghana", campBudget:1000, campHits:"9k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:795554, campName:"Free Bonto", campBudget:1500, campHits:"8.1k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:722957, campName:"Anajo Y3 D3", campBudget:650, campHits:"1.2k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:769855, campName:"Y3n Ko Nkoa", campBudget:780, campHits:"6.4k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:742896, campName:"Drink for life", campBudget:7000, campHits:"3.8k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:087759, campName:"Pure as Spirit", campBudget:910, campHits:"1.7k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:085997, campName:" Nourish your thirst", campBudget:1200, campHits:"9.2k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:398745, campName:"Fountain of life", campBudget:9800, campHits:"8.5k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:297556, campName:" Spring of Youth", campBudget:250, campHits:"4k", campDuration:"15 Days", campDesc:""}
];
// I am the grouped collection. Each one of these
// will contain a sub-collection of friends.
$scope.groups = [];
$scope.groupBy('brandName');
}
);
</script>
</body>
</html>实际上它非常简单。你只需要调用你的
$scope.groupBy('brandName')
你控制器的某个地方。
另一种更简洁的方法是（如果您计划进行扩展），请使用resolve中的ngRouter方法或uiRouter解析数据并在加载页面之前预先格式化
答案 1 :(得分：0)
你可以使用过滤功能来过滤结果让我们说你试图从过滤结果中形成一个表，你可以这样做
AVG([B])
这里我使用了硬编码值，但您可以使用角度数据绑定来动态更改品牌名称。