0
我得到了一些帮助来到目前为止。我只需要进一步实现我的目标。我想通过ng-click动作传递的属性对数据进行分组。我希望在页面加载或刷新时完成此操作。我如何从下面的代码实现这一点？如果有更好的方法来实现我的目标，请提出建议。谢谢。嵌套ng重复与groupBy在页面加载或刷新角度
<!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>
谢谢NikJohn。这很简单。关于解决方法位我该如何应用它？ – Selase
再一次，它非常简单。您需要先使用'ngRouter'或'uiRouter'设置路由。你可以关注[this]（http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx）教程。一旦完成，你可以在状态/路由定义中定义一个'resolve'方法，就像[so]一样（http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs- routes.aspx） – nikjohn