I want to know if there's a better way of doing a select on dropdown and selecting the items. I bound ng-click to every anchor and assign a value on click, but it just doesn't feel like a clean way to do it.
Also, is there a way to use ng-repeat to create the dropdown list dynamically? The problem I get if I use the ng-repeat is the separator. Is there a cleaner way to use ng-repeat or another way?
JavaScript
angular.module('demo', ['ui.bootstrap']);
function SortCtrl($scope) {
$scope.sortBy = [
{
"name": "Name",
"sortName": "name",
"type":"string"
},
{
"name": "Date modified",
"sortName": "dateModified",
"type":"date"
},
{
"name": "Date created",
"sortName": "dateCreated",
"type":"date"
},
{
"name": "Date last sent",
"sortName": "dateLastSent",
"type":"date"
},
{
"name": "separator"
},
{
"name": "Subscribers",
"sortName": "subscribers",
"type":"number"
},
{
"name": "Opens",
"sortName": "opens",
"type":"number"
},
{
"name": "Clicks",
"sortName": "clicks",
"type":"number"
}
];
$scope.order = true;
$scope.orderBy = $scope.sortBy[0];
$scope.$watch('orderBy', function() {
$scope.sortItems();
});
$scope.sortItems = function (){
//perform sort
if($scope.order){
$scope.order = false;
//reverse order here
}else{
$scope.order = true;
}
};
}
HTML
<div ng-controller="SortCtrl" class="btn-group dropdown" dropdown>
<div class="dropdown-toggle btn btn-primary " dropdown-toggle>Sort by <span>{{orderBy.name}}</span>
</div>
<ul class="dropdown-menu">
<li>
<a href="javascript://" ng-click="orderBy = sortBy[0]">Name</a>
</li>
<li>
<a href="javascript://" ng-click="orderBy = sortBy[1]">Date modified</a>
</li>
<li>
<a href="javascript://" ng-click="orderBy = sortBy[2]">Date created</a>
</li>
<li>
<a href="javascript://" ng-click="orderBy = sortBy[3]">Date last send</a>
</li>
<li class="divider"></li>
<li>
<a href="javascript://" ng-click="orderBy = sortBy[5]">Subscribers</a>
</li>
<li>
<a href="javascript://" ng-click="orderBy = sortBy[6]">Opens</a>
</li>
<li>
<a href="javascript://" ng-click="orderBy = sortBy[7]">Clicks</a>
</li>
</ul>
<div class="btn btn-primary" ng-click="sortItems()">
<span class="fa" ng-class="{'fa-sort-alpha-asc':order,'fa-sort-alpha-desc':!order}"></span>
</div>
</div>