Question

我有一个JSON文件，想要根据resturants的地址打印<divs>，但我想根据'r.Address'字段对它们进行分组。像所有带有“地址”的记录一样，德里应首先显示“昌迪加尔”的所有记录，依此类推。我怎么能这样做？

以下是我的一些代码

                    <a href="#" ng-repeat="r in resturant" id="rest-list-f" class="offVal">
                        <div class="col-md-6 col-centered form-planner-inner">
                            <span class="form-text">{{ r.Name }}</span><br>
                            <address><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> &nbsp;{{ r.Address }}</address>
                            <img class="img-responsive" src="{{ r.Image }}" alt="{{ r.Name }} Image"><br>
                            <hr/>
                            <table class="eventActive">
                                <caption><strong><center><a href="#">Click To Read Reviews</a></center></strong></caption>
                                <tr>
                                    <td><span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span> &nbsp;{{ r.Type }}</td>
                                    <td><span class="glyphicon glyphicon-time" aria-hidden="true"></span> &nbsp;{{ r.Hours }}</td>
                                </tr>
                            </table>
                        </div>
                    </a>

这是我的JSON代码

   {
  "records": [
    {
      "Name": "Sagar Ratna",
      "Image": "./images/sr.jpg",
      "Address": "Mohali",
      "Type": "South Indian",
      "Hours" : "10:00-23:30"
    },
    {
      "Name": "The Night Factory",
      "Image": "./images/nf.jpg",
      "Address": "Chandigarh",
      "Type": "Chinese",
      "Hours" : "24/7"
    },
    {
      "Name": "Whistling Duck",
      "Image": "./images/ed.jpg",
      "Address": "Rajpura",
      "Type": "Chinese",
      "Hours" : "11:30-23:30"
    },
    {
      "Name": "Uncle Jack's",
      "Image": "./images/uj.jpg",
      "Address": "Mohali",
      "Type": "Pizza",
      "Hours" : "10:00-22:30"
    },
    {
      "Name": "Corner Griller",
      "Image": "./images/cg.jpg",
      "Address": "Rajpura",
      "Type": "North Indian",
      "Hours" : "11:00-23:30"
    },    {
      "Name": "Starbucks",
      "Image": "./images/st.jpg",
      "Address": "Delhi",
      "Type": "Coffee",
      "Hours" : "24/7"
    }
  ]
}

这就是我想要的输出：

<div> Restaurant Name, Address: Delhi </div>
<div> Restaurant Name, Address: Mohali </div>
<div> Restaurant Name, Address: Mohali </div>
<div> Restaurant Name, Address: Rajpura </div>  
<div> Restaurant Name, Address: Rajpura </div>
<div> Restaurant Name, Address: Rajpura </div>
<div> Restaurant Name, Address: Chandigarh </div>

Answer 1

我的代码中有一点改变了。请试试这个。

<强> JSON

  $scope.Restaurents =  {
  "records": [
    {
      "Name": "Sagar Ratna",
      "Image": "./images/sr.jpg",
      "Address": "Mohali",
      "Type": "South Indian",
      "Hours" : "10:00-23:30"
    },
    {
      "Name": "The Night Factory",
      "Image": "./images/nf.jpg",
      "Address": "Chandigarh",
      "Type": "Chinese",
      "Hours" : "24/7"
    },
    {
      "Name": "Whistling Duck",
      "Image": "./images/ed.jpg",
      "Address": "Rajpura",
      "Type": "Chinese",
      "Hours" : "11:30-23:30"
    },
    {
      "Name": "Uncle Jack's",
      "Image": "./images/uj.jpg",
      "Address": "Mohali",
      "Type": "Pizza",
      "Hours" : "10:00-22:30"
    },
    {
      "Name": "Corner Griller",
      "Image": "./images/cg.jpg",
      "Address": "Rajpura",
      "Type": "North Indian",
      "Hours" : "11:00-23:30"
    },    {
      "Name": "Starbucks",
      "Image": "./images/st.jpg",
      "Address": "Delhi",
      "Type": "Coffee",
      "Hours" : "24/7"
    }
  ]
}

<强> HTML

<a href="#" ng-repeat="r in Restaurents.records | orderBy:'Address'" id="rest-list-f" class="offVal">
                <div class="col-md-6 col-centered form-planner-inner">
                    <span class="form-text">{{ r.Name }}</span><br>
                    <address><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> &nbsp;{{ r.Address }}</address>
                    <img class="img-responsive" src="{{ r.Image }}" alt="{{ r.Name }} Image"><br>
                    <hr />
                    <table class="eventActive">
                        <caption><strong><center><a href="#">Click To Read Reviews</a></center></strong></caption>
                        <tr>
                            <td><span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span> &nbsp;{{ r.Type }}</td>
                            <td><span class="glyphicon glyphicon-time" aria-hidden="true"></span> &nbsp;{{ r.Hours }}</td>
                        </tr>
                    </table>
                </div>
            </a>

希望它会有所帮助。你也可以在控制器端处理时对json数组进行分组。

Answer 2

您可以使用angular.filter模块的groupBy过滤器。所以你可以这样做：

用法：集合| GROUPBY：财产使用带点符号的嵌套属性：property.nested_property

<强> JS：

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];

<强> HTML：

<ul ng-repeat="(key, value) in players | groupBy: 'team'">
 Group name: {{ key }}
  <li ng-repeat="player in value">
   player: {{ player.name }} 
  </li>
</ul>

<强>结果：

组名：alpha

选手：Gene

群组名称：beta

选手：乔治
选手：Paula

组名：gamma

选手：史蒂夫
选手：Scruath

AngularJS基于JSON记录过滤数据

2 个答案: