AngularJS通过ID过滤 - AngularJS Filter by ID

我有以下Json_encode FRom PHP Response…

[
{"ID":"149","IDusr":"4","aut_more_info":"good","doc_name":"img1838142879.jpeg","doc_type":"jpg"},{"ID":"149","IDusr":"4","aut_more_info":"good","img5733250433.jpeg","doc_type":"jpg"},{"ID":"149","IDusr":"4","aut_more_info":"good","doc_name":"img1230306801.jpg_doc","doc_type":"jpg"}
]

我已经尝试了https://github.com/a8m/angular-filter插件。这是我的代码。

<div ng-repeat="(key, value) in Detail | groupBy: 'ID'">
        <div ng-repeat="aut in value">
            <div class="item item-avatar bar bar-calm">
                <h2>{{aut.name}} {{aut.model}}</h2>
            </div>
            <div class="item item-avatar">
                <img src="../www/img/icon/{{aut.doc_name}}">
            </div>
</div>
</div>

正如你从数组中看到的，我有相同的ID，但doc_name是不同的，意味着我想显示ID一次，但三个图像也应该显示。我怎样才能做到呢?

你的JSON中有一个错误，你丢失了一个属性名。

砰砰作响。

angular.module('foo', ['angular.filter'])
.controller('bar', ['$scope', function($scope){

  $scope.Detail = [
    {
      "ID"            : "149",
      "IDusr"         : "4",
      "aut_more_info" : "good",
      "doc_name"      : "img1838142879.jpeg",
      "doc_type"      : "jpg"
    },
    {
      "ID"            :"149",
      "IDusr"         :"4",
      "aut_more_info" :"good",
      // you were missing the property name 'doc_name' here...
      "doc_name"      :"img5733250433.jpeg",
      "doc_type"      :"jpg"
    },
    {
      "ID"            :"149",
      "IDusr"         :"4",
      "aut_more_info" :"good",
      "doc_name"      :"img1230306801.jpg_doc",
      "doc_type"      :"jpg"
    }
  ];
}]);

你似乎也试图渲染值的属性不存在于你的JSON数据

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body ng-app="foo">

    <div ng-controller="bar">
      <div ng-repeat="(key, value) in Detail | groupBy: 'ID'">
        <div ng-repeat="aut in value">
            <div class="item item-avatar bar bar-calm">
              <!-- you don't have properties name or model in your json -->
                <h2>{{aut.name}} {{aut.model}}</h2>
            </div>
            <div class="item item-avatar">
                <img src="../www/img/icon/{{aut.doc_name}}">
            </div>
        </div>
    </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
    <script src="script.js"></script>
  </body>
</html>

我认为你的JSON中有一个概念错误(除了@ a.a alger注意到的那个)。我喜欢ID的唯一性例如，在一个简单的数据库表中，每个select只显示一次ID(主键)。如果进行某些连接操作，则该ID可以出现多次。这很好，因为数据库表(和select)缺乏JSON确实具有的表达能力，所以我将返回这样一个JSON:

[{
  "ID": "149",
  "IDusr": "4",
  "aut_more_info": "good",
  "docs": [{
    "doc_name": "img1838142879.jpeg",
    "doc_type": "jpg"
  }, {
    "doc_name": "img5733250433.jpeg",
    "doc_type": "jpg"
  }, {
    "doc_name": "img1230306801.jpg",
    "doc_type": "jpg"
  }]
}]

通过这种方式，文档自然地分组在一起，你可以不需要任何插件就可以使用你的angular:

<div ng-repeat="user in users">
    ID: {{user.ID}} - IDusr: {{user.IDusr}}
    <h5>Images</h5>
    <div ng-repeat="doc in user.docs">
      {{doc.doc_name}} <br>
      {{doc.doc_type}}
      <hr>
    </div>
  </div>

这是一个活塞，说明它是如何工作的。