I'm attempting to setup a clickable table column header that sort Ascending when first clicked, and Descending when clicked again. My ascending sort is working fine, but I'm not sure how to setup an expression within my OrderBy to sort Descending
My setup thus far:
Table html has something like
<th ng-click="sort('LastName')">Last Name</th>
My sort method looks like
scope.sort = function (columnName) {
if (angular.isDefined(scope.filter)) {
if (scope.filter.SortColumn == columnName) {
scope.filter.SortColumn = columnName;
scope.filter.SortDirection = scope.filters.SortDirection == "Asc" ? "Desc" : "Asc";
} else {
scope.filter.SortColumn = columnName;
scope.filter.SortDirection = "Asc";
}
}
};
And my ng-repeat looks as follows
<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn">
How can I get the SortDirection to factor into the orderBy?
To simply reverse you'd change it to this:
<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn : true">
It'd be best if you used a boolean in your controller, but this should work too:
<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn : filter.SortDirection === 'Desc'">
And just for fun, here's how I do sorting with filtering in my tables.
Controller:
$scope.search = { query: ''};
$scope.sort = { field: 'defaultField', descending: true};
$scope.order = function(newValue) {
if(newValue === $scope.sort.field) {
$scope.sort.descending = !$scope.sort.descending;
} else {
$scope.sort = {field: newValue, descending: false};
}
};
$scope.filteredDocuments = function() {
var a = $filter('filter')($scope.documents, {$:$scope.search.query});
var b = $filter('orderBy')(a, $scope.sort.field, $scope.sort.descending);
return b;
};
A search box for filtering:
<input type="text" ng-model="search.query">
A column header:
<th nowrap>
<a href ng-click="order('size')">Size </a>
<i ng-show="sort.field === 'size' && !sort.descending" class="fa fa-sort-amount-asc"></i>
<i ng-show="sort.field === 'size' && sort.descending" class="fa fa-sort-amount-desc"></i>
</th>
The row binding:
<tr ng-repeat="d in filteredDocuments()" >
A simplified version of the above answer:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Click the table headers to change the sorting order:</p>
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')" >Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy:mySortOrder">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.sorts={};
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
if(x in $scope.sorts) {
$scope.sorts[x]=!$scope.sorts[x];
} else {
$scope.sorts[x]=false;
}
$scope.mySortOrder=$scope.sorts[x];
}
});
</script>
</body>
</html>
Related
I have a ng-table where i am trying to implement selection using check box in each row.
<table id="List" class=" table table-bordered table-striped"
ng-table="tableParams" show-filter="true" template-pagination="custom/pager">
<tbody>
<tr ng-repeat="item in $data" >
<td style="width: 35px">
<input type="checkbox" name="selectedIds[]" value="{{item.id}}" ng-checked="isRowSelected(item.id)" ng-click="toggleSelection(item.id)" />
</td>
<td data-title="'Name'" sortable="'Name'" filter="{ 'Name': 'text' }" >
{{ item.Name}} </a>
</td>
<td data-title="'Email'" sortable="'Email'" >
{{ item.Email}}
</td>
<td data-title="'Phone Number'" sortable="'PhoneNumber'">
{{ item.PhoneNumber}}
</td>
</tr>
this is the controller:
angular.module("umbraco").controller("ListController",
function ($scope, $http, $routeParams) {
$scope.selectedIds = [];
$scope.toggleSelection = function (val) {
var idx = $scope.selectedIds.indexOf(val);
if (idx > -1) {
$scope.selectedIds.splice(idx, 1);
} else {
$scope.selectedIds.push(val);
}
};
$scope.isRowSelected = function (id) {
return $scope.selectedIds.indexOf(id) >= 0;
};
$scope.isAnythingSelected = function () {
return $scope.selectedIds.length > 0;
};
});
i am trying to select individual rows however the above code selecting all the rows on any row click.
any suggestion on this please?
You are not using the power of angular correctly :)
You should try something like that in your view:
<input type="checkbox" ng-checked="item.isRowSelected" ng-click="toggleSelection(item)" />
and in the controller:
$scope.toggleSelection = function(item){
item.isRowSelected = !item.isRowSelected;
}
$scope.isAnythingSelected = function () {
for(var i = 0; i < $scope.data.length; i++){
if($scope.data[i].isRowSelected === true){
return true;
}
}
return false;
};
CONTROLLER
$scope.employee = {};
$scope.setEmployee = function (employee) {
$scope.employeeId = employee.id;
$scope.employee = employee;
a($scope.employeeId);
};
var a = function () {
$scope.meetingTypes = MeetingService.findByEmployee({
'employeeId': $scope.employeeId
}, function () {
angular.forEach($scope.meetingTypes, function (meetingType) {
$scope.meetings = MeetingService.findByMeetingType(meetingType);
});
});
};
TEMPLATE
<tr>
<td>
<a ng-repeat="meetingType in meetingTypes">
- {{meetingType}}
</a>
<a ng-repeat="meeting in meetings">
- {{meeting}}
</a>
</td>
</tr>
Here I want to open second <a> tag on click of first <a> tag
The view should like tree view
LIKE :
- meeting_type
- meeting 1
- meeting 2
all services are declared in my .factory
Here I am getting meeting Type properly but i want to open list of meetings on click of meetingType <a> tag but i am not getting meetings here,
Is ng-href is helpfull here ?
Here is a some sample code which I think demonstrates what you want to acheive -
<table ng-app="myApp" ng-controller="TestCtrl">
<tr>
<td>Get Meetings</td>
</tr>
<tr>
<td>
<ul>
<li ng-repeat="meetingType in meetingTypes track by $index">
- {{meetingType.typeName}}
<ul ng-show="showMeetings && meetingType.meetings.length>0">
<li ng-repeat="meeting in meetingType.meetings track by $index">
<a>- {{meeting}}</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
javascripts -
'user strict';
angular.module('myApp', [])
.controller('TestCtrl', function($scope) {
$scope.employee = {};
$scope.meetingTypes = {};
$scope.setEmployee = function(employee) {
$scope.employeeId = 1;
//$scope.employee = {};
a($scope.employeeId);
};
var a = function() {
// your service should return this json
$scope.meetingTypes = [{
typeName: 'abc',
meetings: ['meeting1', 'meeting2', 'meeting3']
}, {
typeName: 'def',
meetings: ['meeting4', 'meeting5', 'meeting6']
}, {
typeName: 'ghi',
meetings: ['meeting7', 'meeting8', 'meeting8']
}];
};
});
jsfiddle
Angular javascript array is empty?
I have an array of checkboxes databound to an angular scoped list
I need to check a few checkboxes and send bind them to a second angular scoped array:
My HTML:
<tr ng-repeat="item in pagedItems[currentPage]"
ng-controller="DealerComMaintainCtrl">
<td align="center">
<input type="checkbox" id="{{item.IdArticle}}"
ng-value="item.IdArticle"
ng-checked="selected.indexOf(item.IdArticle) > -1"
ng-click="toggleSelect(item.IdArticle)" />
</td>
<td>
<a href="/Dealercoms/ArticleDownload?FileName={{item.FileName}}&IdArticle={{item.IdArticle}}"
class="btn btn-xs btn-total-red btn-label"><i class="ti ti-download"></i></a>
</td>
<td>{{item.DateArticle | date:'dd/MM/yyyy'}}</td>
<td>{{item.Title}}</td>
<td>{{item.Archive}}</td>
</tr>
And JS in the controller:
$scope.selected = [];
$scope.toggleSelect = function toggleSelect(code) {
var index = $scope.selected.indexOf(code)
if (index == -1) {
$scope.selected.push(code)
} else {
$scope.selected.splice(index, 1)
}
}
$scope.ArchiveDocs = function() {
var selectedoptionz = $scope.selection;
console.log(selectedoptionz);
};
I tried your code and i fixed the problem, by adding the controller on an element above the ng-repeat. The alert is only to check, what is in the selected-array. This is the code, which works fine on my system:
<html>
<head>
</head>
<body ng-app="app">
<table ng-controller="DealerComMaintainCtrl">
<tbody>
<tr ng-repeat="item in pagedItems" >
<td align="center">
<input type="checkbox" id="{{item.IdArticle}}" ng-value="item.IdArticle" ng-checked="selected.indexOf(item.IdArticle) > -1" ng-click="toggleSelect(item.IdArticle)" />
</td>
<td><i class="ti ti-download"></i></td>
<td>{{item.DateArticle | date:'dd/MM/yyyy'}}</td>
<td>{{item.Title}}</td>
<td>{{item.Archive}}</td>
</tr>
</tbody>
</table>
<!-- jQuery -->
<script src="./jquery-2.1.4/jquery.min.js"></script>
<!-- AngularJS -->
<script src="./angular-1.4.5/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller("DealerComMaintainCtrl", function($scope){
$scope.pagedItems = [
{IdArticle: 1, Title: "test1", Archive: "archiv1"},
{IdArticle: 2, Title: "test2", Archive: "archiv1"},
{IdArticle: 3, Title: "test3", Archive: "archiv1"},
{IdArticle: 4, Title: "test4", Archive: "archiv1"}
];
$scope.selected = [];
$scope.toggleSelect = function toggleSelect(code) {
var index = $scope.selected.indexOf(code)
if (index == -1) {
$scope.selected.push(code)
}
else {
$scope.selected.splice(index, 1)
}
alert(JSON.stringify($scope.selected));
}
});
</script>
</body>
</html>
Just try it, i hope it solve your problem...
I have an map of data items I'm displaying in a table that gets refreshed with new values in the controller (hence the track by key). This all works fine.
If I try to throw an angular filter into the mix, it ignores the filter and displays all the data.
(BTW, items in data are being filled in by a callback from data coming from websocket - maybe this is causing the problem)
What am I missing here?
<label>Filter by Id <input ng-model="search.id"></label><br>
<table class="table table-striped">
<tr>
<th>Id</th>
<th>type</th>
<th>value</th>
<th>time</th>
</tr>
<tr ng-repeat="item in data | filter:search track by item.key">
<td>{{item.id}}</td>
<td>{{item.type}}</td>
<td>{{item.value}}</td>
<td>{{item.timestamp}}</td>
</tr>
</table>
controller:
DataService.addListener(listener);
$scope.data = {};
//incoming data from a websocket
function listener(data) {
var key = data.stuff.id1 + ':' + data.stuff.id2;
var lineItem = {
'id' : data.stuff.id1,
'type' : data.stuff.id2,
'value' : data.data.value,
'timestamp' : new Date(data.stuff.ts).toTimeString(),
'key' :key
};
$scope.$apply(function() {
$scope.data[key] = lineItem;
});
}
note that item.key is a property that uniquely identifies the item in the map of data.
You are filtering by search and not search.id since your input's model is set as search.id. Try this:
<tr ng-repeat="item in data | filter:search.id track by item.key">
Problem was filter doesn't work on maps. Derp.
Stole a map filter from this answer here, now it all works.
plunker
http://plnkr.co/edit/u5D3tGGKDOY4P4u6T1GZ?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="TestCtrl">
<label>Filter by Id <input ng-model="search.id"></label><br>
<table border="1">
<tr>
<th>Id</th>
<th>value</th>
</tr>
<tr ng-repeat="item in data | mapFilter:search track by item.key">
<td>{{item.id}}</td>
<td>{{item.value}}</td>
</tr>
</table>
</body>
</html>
script:
angular.module('app', []).controller('TestCtrl', function($scope) {
$scope.data = {};
for (var i = 0; i < 20; i++) {
var item = {
id: randomWord() + " " + randomWord(),
key: 'key ' + i,
value: Math.floor(Math.random() * 300),
};
$scope.data[item.key] = item;
}
})
.filter('mapFilter', function($filter) {
var filter = $filter('filter');
return function(map, expression, comparator) {
if (! expression) return map;
var result = {};
angular.forEach(map, function(data, index) {
if (filter([data], expression, comparator).length)
result[index] = data;
});
return result;
}
});
var words = [
'lunville',
'pandybat',
'demurrer',
'slighter',
'reguline',
'exploder',
'krakatoa',
'wirespun',
];
function randomWord() {
return words[ Math.floor(Math.random() * 8)];
}
I have an ng-repeat for a table, I want to be able to add a class when <td> is clicked, and remove the class when un-clicked. Multiple <td> can be selected at the same time. Right now ALL of the cities are or are not getting the class applies.
For example: (lets say nodes has 100 items)
<tr ng-repeat node in nodes>
<td>{{node.name}}</td>
<td>{{node.date}}</td>
<td ng-click="toggleMe( node.city )" ng-class"{clicked : isClicked()}" >{{node.city}}</td>
</tr>
in my JS
$scope.cityArr = [];
$scope.toggleMe = function(city) {
if ($scope.count > 0) {
angular.forEach($scope.cityArr, function(value) {
if (city === value) {
$scope.clicked = false;
} else {
$scope.cityArr.push(city);
$scope.clicked = true;
}
});
} else {
$scope.cityArr.push(city);
$scope.clicked = true;
}
$scope.count = 1;
};
$scope.isClicked = function() {
return $scope.clicked;
};
Right now there is a single clicked property on the scope that you're changing and everything refers to that. Try to put clicked on the node instead...
$scope.toggleMe = function(node) {
if ($scope.count > 0) {
angular.forEach($scope.cityArr, function(value) {
if (node.city === value) {
node.clicked = false;
} else {
$scope.cityArr.push(node.city);
node.clicked = true;
}
});
} else {
$scope.cityArr.push(node.city);
node.clicked = true;
}
$scope.count = 1;
};
And in the ngRepeat...
<tr ng-repeat node in nodes>
<td>{{node.name}}</td>
<td>{{node.date}}</td>
<td ng-click="toggleMe( node )" ng-class"{clicked : node.clicked}" >{{node.city}}</td>
</tr>
You don't need a special function or controller to accomplish this:
<table>
<tbody>
<tr ng-repeat="node in nodes">
<td>{{node.name}}</td>
<td>{{node.date}}</td>
<td ng-click="node.highlight = !node.highlight"
ng-class="{ highlight: node.highlight }">
{{node.city}}
</td>
</tr>
</tbody>
</table>
Full Plunker example: http://plnkr.co/edit/1hdcIOfz0nHb91uFWKrv
I could show you the controller I used by it's empty except for the test data. You don't need a function.
Alternately, the code can use a separate array and $index to set classes:
<tr ng-repeat="node in nodes"
ng-class="{ highlight: highlightRows[$index] }">
<td class="x" ng-click="toggleHighlight($index)">
X
</td>
This approach is useful if you want to separate Model data from View data.
The DEMO
angular.module("app", [])
.controller("TestController", function($scope) {
$scope.highlightRows = [];
$scope.toggleHighlight = function(idx) {
$scope.highlightRows[idx] = !$scope.highlightRows[idx];
};
$scope.nodes = [
{ name: "Alpha", date: new Date(), city: "Omaha" },
{ name: "Bravo", date: new Date(), city: "New York" },
{ name: "Charlie", date: new Date(), city: "Minneapolis" }
];
})
table {
border-collapse: collapse;
font-family: sans-serif;
}
td {
padding: 5px;
border: solid black 1px;
}
.x {
cursor: pointer;
}
.highlight {
background: yellow;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="TestController">
<table>
<h3>Click on X to highlight</h3>
<tbody>
<tr ng-repeat="node in nodes"
ng-class="{ highlight: highlightRows[$index] }">
<td class="x" ng-click="toggleHighlight($index)">
X
</td>
<td>{{node.name}}</td>
<td>{{node.date | date}}</td>
<td>{{node.city}}</td>
</tr>
</tbody>
</table>
highlightRows={{highlightRows}}
</body>