JSON 레코드를 기반으로하는 AngularJS 필터 데이터

나는 JSON 파일을 가지고 있으며 레스토랑 주소에 따라 <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" 
    } 
    ] 
}

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

HTML을

는 도움이되기를 바랍니다. 컨트롤러 쪽에서 처리하는 동안 json 배열을 그룹화 할 수도 있습니다.

출처

2016-10-04 18:58:07

당신은 angular.filter의 GROUPBY 필터를 사용할 수 있습니다 기준 치수. 이렇게하면 다음과 같이 할 수 있습니다.

사용법 : 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>

결과 :

그룹 이름 점 표기법과 재산 사용 중첩 된 속성을 : 알파

플레이어 : 유전자

그룹 이름 : 베타

선수 : 조지
플레이어 : 폴라

그룹 이름 : 감마

플레이어 : 스티브
플레이어 : Scruath

출처

2016-10-04 18:41:09

JSON 레코드를 기반으로하는 AngularJS 필터 데이터

답변

관련 문제