JSONレコードに基づくAngularJSフィルタデータ

Question

私はJSONファイルを持っていて、修復者のアドレスに基づいて<divs>を印刷したいが、 'r.Address'フィールドに基づいてグループ化したい。 「住所」を持つすべてのレコードと同様、Delhiは最初に「Chandigarh」などのすべてのレコードが続いて表示されます。これどうやってするの？

以下は、私のコードの一部が

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

結果：

グループ名：アルファ

• プレーヤー：遺伝子

グループ名：ベータ

• プレーヤー：ジョージ

• プレーヤー：ポーラ

グループ名：ガンマ

• プレーヤー：スティーブ

• プレーヤー：Scruath