2
\$\begingroup\$

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.