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的唯一性。例如，在一个简单的数据库表中，每个data/filename.txt只显示一次ID（主键）。如果您进行一些连接操作，ID可以出现多次。这很好，因为数据库表（和select）缺乏JSON确实具有的表现力，所以我将返回一个像这样的json：

select

通过这种方式，文档自然地组合在一起，您可以在没有任何插件的情况下使用角度：

[{
  "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"
  }]
}]

这是展示其运作方式的plunker。

AngularJS按ID过滤

2 个答案: