Hi everyone,
I am quite new to AngularJS. To be honest I dont really work much with it.
I just have to style the output of it.
So what I have is a table (source follows)
And if I click on an element in the th-element I want all td in that sorted
column to have a class call highlighted
also I want to have the child element of the item (p-element) i clicked to
toggleClass
Here comes my source:
<table border="1" class="gridTable table table-bordered">
<thead>
<tr >
<th align="left" class="gridTableHeadElement">
<p ng-click="SortByStringField('InstrumentName')">Name<i
class="sort"></i></p>
<p ng-click="SortByStringField('ISIN')">ISIN<i class="sort"></i></p>
</th>
<th align="center" class="gridTableHeadElement">
<p ng-click="SortByNumberField('Size')">Size<i class="sort"></i></p>
</th>
<th align="right" class="gridTableHeadElement">
<p ng-click="SortByNumberField('CurrentQuote')">akt. Kurs<i
class="sort"></i></p>
<p ng-click="SortByNumberField('CurrentWorth')">akt. Wert<i
class="sort"></i></p>
</th>
<th align="right" class="gridTableHeadElement">
<p>Kaufpreis</p>
</th>
<th align="right" class="gridTableHeadElement">
<p>+/- heute</p>
<p>% heute</p>
<p>Wertentw. heute</p>
</th>
<th align="right" class="gridTableHeadElement">
<p>+/- gesamt</p>
<p>% gesamt</p>
<p>Wertentw. gesamt</i></p>
</th>
</tr>
</thead>
<tr class="gridIndiceSection">
<td align="left" class="gridTableBodyElement">
<p class="boldText">{{component.InstrumentName}}</p>
<p>{{component.ISIN}}</div>
</td>
<td align="center" class="gridTableBodyElement">
<p>{{component.Size}}</p>
</td>
<td align="right" class="gridTableBodyElement">
<p>{{component.CurrentQuote}}</p>
<p>{{component.CurrentWorth}}</p>
</td>
<td align="right" class="gridTableBodyElement">
<p>{{component.BuyingQuote}}</p>
<p>{{component.BuyingWorth}}</p>
<p>{{component.BuyingDate}}</p>
</td>
<td align="right" class="gridTableBodyElement">
<p class="greenText">{{component.ChangeTodayAbsolute}}</p>
<p class="greenText">{{component.ChangeTodayRelative}}</p>
<p class="greenText">{{component.ChangeTodayAbsolutePerformance}}</p>
</td>
<td align="right" class="gridTableBodyElement">
<p class="greenText">{{component.ChangeOverallAbsolute}}</p>
<p class="greenText">{{component.ChangeOverallRelative}}</p>
<p class="greenText">{{component.ChangeOverallAbsolutePerformance}}</p>
</td>
</tr>
</table>
here is the javascript I have to deal with:
var myapp = angular.module('myapp', ['ui']);
myapp.controller('controller', function ($scope, $http) {
$scope.list = [];
$scope.sortCache = {};
$http.get("/GetPortfolio/@ViewBag.SelectedId").then(function (result) {
$scope.list = result.data;
});
$scope.SortByStringField = function (fieldname) {
$scope.sortCache[fieldname] = !$scope.sortCache[fieldname];
$scope.list[0].Components= $scope.list[0].Components.sort(sort_by(
fieldname,
$scope.sortCache[fieldname],
function(a){return a.toUpperCase()}
));
};
$scope.SortByNumberField = function (fieldname) {
$scope.sortCache[fieldname] = !$scope.sortCache[fieldname];
$scope.list[0].Components= $scope.list[0].Components.sort(sort_by(
fieldname,
$scope.sortCache[fieldname],
parseInt
));
};
});
angular.bootstrap(document, ['myapp']);
var sort_by = function(field, reverse, primer){
var key = primer ?
function(x) {return primer(x[field])} :
function(x) {return x[field]};
reverse = [-1, 1][+!!reverse];
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
would be awesome if someone can help me out with that. Cause the guy who
wrote the code has also no idea
Best regards
Holger
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
