CODEWITHSUNDEEP
angularjs
Darama
Darama

Reputation: 3370

Complicated sorting with tabs in ng-repeat?

I have the following JSON object:

      $scope.projects = [
  {
    "_id": "58ab1cb6edf5430e9014e2bc",
    "name": "Project 1",
    "issues": [
      {
        "status": 0,
        "name": "Hart Cummings"
      },
      {
        "status": 1,
        "name": "Kinney Leach"
      },
      {
        "status": 2,
        "name": "Blake Mclaughlin"
      }
    ]
  },

  {
    "_id": "58ab1cb6d87456482e0eec4a",
    "name": "Project 2",
    "issues": [
      {
        "status": 0,
        "name": "Vargas Gordon"
      },
      {
        "status": 1,
        "name": "Bobbie Church"
      },
      {
        "status": 2,
        "name": "Pennington Fry"
      }
    ]
  },

  {
    "_id": "58ab1cb6d87456482e0eec4a",
    "name": "Project 3",
    "issues": [
      {
        "status": 0,
        "name": "WWWWW"
      },
      {
        "status": 1,
        "name": "SFSF"
      },
      {
        "status": 2,
        "name": "Pennington Fry"
      }
    ]
  }
];

I use ng-repeat to display this object in template:

    <div ng-app="app">
<div ng-controller="TodoListController">

<div ng-repeat="project in projects">
<br>
   <br>
 <div><b> {{project.name}}</b></div>

   <div class="tabs">
      <div style="display:inline" ng-click="sort(1, $index);">Active</div> |
      <div style="display:inline" ng-click="sort(0, $index);">Deactivated</div> 
   </div>

   _____________________________________
   <div ng-repeat="issue in project.issues | filter: (filterObject.index | filterObject.status)">
      <div>{{issue.name}}</div>
    </div>
</div>


</div>
</div>

So, as you can see I have two nested ng-repeat.

Issue is:

When I click on any tab and call method sort() I need to sort issue in project.issues by status field.

This is real sample that I want to reach.

https://jsfiddle.net/at6kw67g/

Problem is in this code:

<div ng-repeat="issue in project.issues | filter:filterObject.index : {status : filterObject.status}">

Upvotes: 0

Views: 105

Answers (1)

JB Nizet
JB Nizet

Reputation: 691865

Since the links should sort the issues of a specific project, you should pass the project as argument to your sort() function.

And JavaScript arrays have a sort() method, so just use it.

Since one link should sort issues in ascanding order, and the other one in descending order, you should also pass this information to your sort() function.

So it boils down to

  $scope.sortIssuesByStatus = function(project, descending) {
    project.issues.sort(function(issue1, issue2) {
      var result = issue1.status - issue2.status;
      if (descending) {
        result = -result;
      }
      return result;
    });
  }

and 

<div ng-repeat="project in projects">
   <div class="tabs">
      <button ng-click="sortIssuesByStatus(project, true)">Active</button> 
      <button ng-click="sortIssuesByStatus(project, false)">Deactivated</button> 
   </div>
   <div ng-repeat="issue in project.issues">
      <div>{{issue.name}} - {{ issue.status }}</div>
    </div>
</div>

Here's a plunkr implementing it.

Upvotes: 1

Related Questions