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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.