AngularJS 按 ID 过滤

Question

我有以下 Json_encode FRom PHP 响应...

[
{"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，但也应该显示三个图像。我怎样才能做到这一点？

提前致谢...

Answer 1

您的 JSON 中有一个错误，您缺少属性名称。

Plunker.

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>

Answer 2

我认为您的 JSON 中存在概念错误（@A.Alger 注意到的错误除外）。我喜欢 ID 的 唯一性 。例如，在一个简单的数据库 table 中，每个 select 您的 ID（主键）只显示一次。如果您进行一些连接操作，该 ID 可能会出现多次。这很好，因为数据库 table（和 select）缺乏 JSON 确实具有的表达能力，所以我将 return 一个 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>

这是一个 plunker 展示它是如何工作的。

AngularJS 按 ID 过滤

AngularJS Filter by ID

javascript

php

angularjs

angularjs-filter