Javascript AngularJS基于JSON记录过滤数据

Javascript AngularJS基于JSON记录过滤数据,javascript,angularjs,arrays,sorting,angularjs-scope,Javascript,Angularjs,Arrays,Sorting,Angularjs Scope,我有一个JSON文件,想根据餐厅地址打印,但我想根据“r.address”字段对它们进行分组。像所有带有“地址”的记录一样,德里应该先显示,然后是所有“昌迪加尔”的记录,以此类推。我该怎么做 下面是我的一些代码 <a href="#" ng-repeat="r in resturant" id="rest-list-f" class="offVal"> <div class="col-md-

我有一个JSON文件,想根据餐厅地址打印
,但我想根据“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>
这是我想要的输出,如:

<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>
餐厅名称、地址:德里
餐厅名称、地址:Mohali
餐厅名称、地址:Mohali
餐厅名称、地址:Rajpura
餐厅名称、地址:Rajpura
餐厅名称、地址:Rajpura
餐厅名称、地址:昌迪加尔

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

用法:collection | groupBy:property 使用带点符号的嵌套属性:
property.nested\u属性

JS:

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
 Group name: {{ key }}
  <li ng-repeat="player in value">
   player: {{ player.name }} 
  </li>
</ul>
HTML:

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
 Group name: {{ key }}
  <li ng-repeat="player in value">
   player: {{ player.name }} 
  </li>
</ul>
    组名:{{key}
  • 玩家:{{player.name}
结果:

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
 Group name: {{ key }}
  <li ng-repeat="player in value">
   player: {{ player.name }} 
  </li>
</ul>
组名:阿尔法

  • 球员:吉恩
组名:beta

  • 球员:乔治

  • 球员:保拉

组别名称:gamma

  • 球员:史蒂夫

  • 玩家:Scruath


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

用法:collection | groupBy:property 使用带点符号的嵌套属性:
property.nested\u属性

JS:

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
 Group name: {{ key }}
  <li ng-repeat="player in value">
   player: {{ player.name }} 
  </li>
</ul>
HTML:

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
 Group name: {{ key }}
  <li ng-repeat="player in value">
   player: {{ player.name }} 
  </li>
</ul>
    组名:{{key}
  • 玩家:{{player.name}
结果:

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
 Group name: {{ key }}
  <li ng-repeat="player in value">
   player: {{ player.name }} 
  </li>
</ul>
组名:阿尔法

  • 球员:吉恩
组名:beta

  • 球员:乔治

  • 球员:保拉

组别名称:gamma

  • 球员:史蒂夫

  • 玩家:Scruath


    • 我对您的代码做了一些更改。请试试这个

      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>
      
      
      {{r.Type}
      {{r.小时数}
      
      希望这会有帮助。
      您还可以在控制器端处理时对json数组进行分组。

      我在您的代码中做了一些更改。请试试这个

      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>
      
      
      {{r.Type}
      {{r.小时数}
      
      希望这会有帮助。 您还可以在控制器端处理时对json数组进行分组