2016-09-19 2 views
1

나는 angularjs의 절대적인 초보자이며 지난 3 일 동안 손을 더럽 히고 있습니다. 이제 요구 사항은 json 문자열을 나머지 끝점에서 테이블 형식 데이터로 변환하는 것입니다. 여기에 노력하고 코드입니다.AngularJs : json 문자열을 html로 변환

$scope.getDataCatalogue = function(){ 

     $http.get('http://api.geosvc.com/rest/US/84606/nearby?apikey=485a35b6b9544134b70af52867292071&d=20&pt=PostalCode&format=json') 
      .success(function(data, status, headers, config){ 
       //do something with your response 
       $scope = data; 
      }) 
      .error(function(error){ 
       console.log("not world"); 
      }); 
    } 

    $scope.getDataCatalogue = function(){ 
    alert('getDataCatalogue'); 
    } 

이제 json을 데이터에서 그리드로 변환 할 수 있습니까? 이것이 문제에 접근하는 올바른 방법인가?

<table> 
    <thead> 
     <tr> 
      <th>header 1</th> 
      <th>header 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="row in data"> 
      <td>{{row.attribute1}}</td> 
      <td>{{row.attribute2}}</td> 
     </tr> 
    </tbody> 
</table> 

을 또는 더 진보 된 테이블을 렌더링하는 UI 그리드와 같은 라이브러리를 사용 :

+0

이 당신이를 형성하려고하면 당신이 할 수있는 보일러를 찾을 매우 적은 기회는 데이터를 정렬 한 후 직접 테이블을 작성하면 –

+0

데이터가 고정 된 알려진 구조로 제공됩니까? 내 말은 개체의 숫자 열/속성이 항상 같은 것입니까? –

+0

내 대답을 확인하십시오. –

답변

1

고정 된 구조가 데이터에서 나오는 경우 ng-repeat을 사용하여 개체 (데이터)를 반복하고 미리 만들어진 테이블에 표시 할 수 있습니다. Fiddle

예는 다음과 같습니다 :

이 당신이 $scope 변수 이름의 사람들에게 할당하는 개체입니다 고려. 당신의 HTML에서

.success(function(data, status) { 
    $scope.people = data; 
}); 

: 컨트롤러에서 $scope.people = data;

[ 
    { 
     id: 1, 
     firstName: "Peter", 
     lastName: "Jhons" 
    }, 
    { 
     id: 2, 
     firstName: "David", 
     lastName: "Bowie" 
    } 
] 

<table> 
    <tr> 
     <th>Id</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
    </tr> 
    <tr ng-repeat="person in people"> 
     <td>{{person.id}}</td> 
     <td>{{person.firstName}}</td> 
     <td>{{person.lastName}}</td> 
    </tr> 
</table> 
0

는보기에서 자신을 하나를 수행합니다.