CODEWITHSUNDEEP
angularjsangularjs-directive
Or Weinberger
Or Weinberger

Reputation: 7472

How can I sort a directive output?

I have the following Directive:

app.directive('sidebar', function () {
  return {
    restrict: 'E',
    replace: true,
    template: '<li ng-repeat="(keymenu, valmenu) in menu"><a href="{{valmenu.url}}"><i class="{{valmenu.image}}"></i><span class="hidden-sm">{{keymenu}}</span></a></li>',
    link: function (scope, elem, attrs) {
      scope.menu = {
        "Home": {
          "sort": 1,
          "url": "/",
          "image": "fa fa-bar-chart-o"
        },
        "Datasources": {
          "sort": 2,
          "url": "/datasources",
          "image": "fa fa-dashboard"
        },
        "Logger": {
          "sort": 3,
          "url": "/Logger",
          "image": "fa fa-dashboard"
        }

      }
    }
  }
});

Currently the order is: Datasources, Home, Logger I would like to order it either by the sort property or by it's 'natural' order as the elements are ordered within the scope.menu object.

Upvotes: 0

Views: 62

Answers (1)

Fals
Fals

Reputation: 6839

You can use orderBy direcly into the <li /> template:

This code will sort your menu for the property name that you want:

'<li ng-repeat="(keymenu, valmenu) in menu| orderBy:myProperty">'

EDIT:

You should change the way your JSON looks, or you will have issues to access and order the menu. The way you did every menu entry is a different object, you should do like this:

scope.menu =[
   {
      "name": "Home",
      "sort": 1,
      "url": "/",
      "image": "fa fa-bar-chart-o"
    },
    {
      "name":"Datasources",
      "sort": 2,
      "url": "/datasources",
      "image": "fa fa-dashboard"
    },
    {
      "name": "Logger",
      "sort": 3,
      "url": "/Logger",
      "image": "fa fa-dashboard"
    }
  ]

Then sort by name for exemple:

'<li ng-repeat="(keymenu, valmenu) in menu| orderBy:name">'

Upvotes: 2

Related Questions