Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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?

plunker link

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>
share|improve this question
    
I finished by creating a directive. Easier that way and it looks more clean now :) –  Marcio Apr 8 at 4:44
    
If that closes your question, would you put your directive as answer so it doesn't appear unanswered? –  Dmitri Zaitsev Apr 12 at 11:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.