0
これまでにいくつかの助けがありました。私は、私が何を達成するために一歩進んでいく必要があります。私は現在、ng-clickアクションによって渡された属性によってデータをグループ化したいと思います。私はこれをページの読み込みまたはリフレッシュに行うことを望みます。どのように私は以下のコードからこれを達成することができますか？私が何を達成するための良い方法があれば助言をしてください。ありがとう。ページ内のgroupByをネストしたng-repeatページをロードまたはリフレッシュする
<!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）チュートリアルに従うことができます。いったん完了したら、[so]（http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-label/）のような状態/ルート定義で 'resolve'メソッドを定義することができます。 routes.aspx） – nikjohn