Angularjs Sorting data in ng-repeat two items

Question

I have two jsons: templates, and images

$scope.templates = [
        {"id_template": 1, "name": "First Template", "group": "sport"}
        {"id_template": 2, "name": "Second Template", "group": "animals"},
        ];

    $scope.images = [
        {"id_image": 1, "id_template": 1, "title":"Image Lewy"},
        {"id_image": 2, "id_template": 1, "title":"Image ball"},
        {"id_image": 3, "id_template": 2, "title":"Image dog"},
    ]

I would like to display in the view images sorted by id_template. I know that you must create a loop in the loop but do not know how ? My view.html:

<div class="images" ng-repeat="template in templates">
 {{template: name}}
 Images to this template: 
 <ul>
  <li ng-repeat="image in images | filter:template.id_template">{{image.title}}</li>
</ul>
</div>

There is an error in your filter, it should look like this filter:{id_template:template.id_template} Here is a fiddle for anyone to use — George
– George, Commented Dec 14, 2016 at 13:19
@George its working i have one more question: in templates i have group and i want show only one group it means: group: 1, group:1, i want show only one group in view and images to this group how to do this? — Kaker
– Kaker, Commented Dec 14, 2016 at 13:34
<div class="images" ng-repeat="template in templates | filter : {group : 'animals'}"> add this — Parshuram Kalvikatte
– Parshuram Kalvikatte, Commented Dec 14, 2016 at 13:44

George · Accepted Answer · 2016-12-14 13:28:59Z

4

You can sort in angular by using orderBy filter. Please go through https://docs.angularjs.org/api/ng/filter/orderBy documentation if you want more details. From example below the result will be ascending and if you want it to be descending order add '-template_id'

Ascending

<div class="images" ng-repeat="template in templates | orderBy: 'template_id'">
 {{template.name}}
 Images to this template: 
 <ul>
  <li ng-repeat="image in images | filter:{id_template:template.id_template}">{{image.title}}</li>
</ul>
</div>

Descending

<div class="images" ng-repeat="template in templates | orderBy: '-template_id'">
 {{template.name}}
 Images to this template: 
 <ul>
  <li ng-repeat="image in images | filter:{id_template:template.id_template}">{{image.title}}</li>
</ul>
</div>

edited Dec 14, 2016 at 13:28

George

6,7592 gold badges31 silver badges36 bronze badges

answered Dec 14, 2016 at 13:22

digit

4,5653 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kaker Over a year ago

i have one more question: in templates i have group and i want show only one group it means: group: 1, group:1, i want show only one group in view and images to this group how to do this?

digit Over a year ago

You can use ng-if to filter the group

Kaker Over a year ago

it means how to use ng-if

digit Over a year ago

Do you mean that you want the result of group1 only or grouping by record?

Kaker Over a year ago

grouping by record

|

Sa E Chowdary · Accepted Answer · 2016-12-14 13:21:10Z

your almost there but have a small syntax error which is you need to print like {{template.name}} instead of {{template: name}}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="images" ng-repeat="template in templates">
 {{template.name}}
 Images to this template: 
 <ul>
  <li ng-repeat="image in images | filter:{id_template:template.id_template}">{{image.title}}</li>
</ul>
</div
  </body>
<script>
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.templates = [
        {"id_template": 1, "name": "First Template", "group": "sport"},
        {"id_template": 2, "name": "Second Template", "group": "animals"}
        ];

    $scope.images = [
        {"id_image": 1, "id_template": 1, "title":"Image Lewy"},
        {"id_image": 2, "id_template": 1, "title":"Image ball"},
        {"id_image": 3, "id_template": 2, "title":"Image dog"},
    ]
  
 
});
</script>
</html>

Mohammad.Gh · Accepted Answer · 2016-12-14 13:17:36Z

0

you must use OrderBy for sorting items in angularjs

<li ng-repeat="image in images | orderBy:template.id_template">{{image.title}}</li>

answered Dec 14, 2016 at 13:17

Mohammad.Gh

3953 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angularjs Sorting data in ng-repeat two items

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related