基於JSON記錄的AngularJS過濾器數據

我有一個JSON文件，並且想根據resturants的地址打印<divs>，但我想根據'r.Address'字段對它們進行分組。就像所有有「地址」的記錄一樣，首先應顯示「昌迪加爾」的所有記錄等等。我怎樣才能做到這一點？基於JSON記錄的AngularJS過濾器數據

以下是我的一些代碼

    <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>

來源

2016-10-04 Jaskaran Singh Puri

我已經在你的代碼改了一下。請試試這個。

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數組。

來源

2016-10-04 18:58:07

您可以使用angular.filter GROUPBY過濾器模塊。所以你可以這樣做：

usage： collection | 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>

結果：

組名：阿爾法

球員：基因

組名稱：Beta

球員：喬治
球員：保

組名：伽馬

球員：史蒂夫
球員：Scruath

來源

2016-10-04 18:41:09

基於JSON記錄的AngularJS過濾器數據

回答

相關問題