Question

我有两个jsons：模板和图像

$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"},
    ]

我想在视图中显示按id_template排序的图像。我知道你必须在循环中创建一个循环，但不知道如何？我的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>

Answer 1

您可以使用orderBy过滤器对角度进行排序。如果您需要更多详细信息，请查看https://docs.angularjs.org/api/ng/filter/orderBy文档。从下面的示例中，结果将是升序，如果您希望降序，请添加＆＃39; -template_id＆＃39;

<强>升序

<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>

<强>降序

<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>

Answer 2

你几乎就在那里，但语法错误很少，你需要打印{{template.name}}而不是{{template: name}}

＆＃13;

<!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="angular.js@1.4.x" 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>

＆＃13;

Answer 3

您必须使用OrderBy对angularjs中的项目进行排序

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

Angularjs在ng-repeat两个项目中对数据进行排序

3 个答案: