Javascript/JQuery (Ampersand.js/Angular)를 통해 객체의 배열 객체로 html 테이블을 채우는 방법

Question

카테고리별로 내용을 표시하는 HTML 테이블을 채우려고합니다. JQuery Datatables를 사용하지 않고이 작업을 수행해야합니다. 그래서 나는 이것을 정규 HTML 테이블로하려고 노력하고있다. I를 사용하고

______________________________________ 
| Name  | Color | Healthy? | 
-------------------------------------- 
|Fruits        | 
-------------------------------------- 
| Apple  |  Red |  True | 
|----------------------|-------------- 
| Orange | Orange |  True | 
|----------------------|-------------- 
| Grape  | Purple |  True | 
|----------------------|-------------- 
| Sweets        | 
|------------------------------------- 
| Candy | Pink |  False | 
-------------------------------------- 

: 나는 (카테고리로 구분)과 같이 보일 것이다 HTML 테이블을 채우기 위해 노력하고

Object { 
    Fruits: [ 
     Apple: { 
      {color: 'red'}, 
      {healthy: true} 
     }, 
     Orange: { 
      {color: 'orange'}, 
      {healthy: true} 
     }, 
     Grape: { 
      {color: 'purple'}, 
      {healthy: true} 
     } 
    ], 
    Sweets: [ 
     Candy: { 
      {color: 'pink'}, 
      {healthy: false} 
     } 
    ], 
} 

을 : 여기

객체의 배열 내 객체입니다 Ampersand.js/각. 컬렉션에서 필요로하는 데이터를 필터링하고 HTML 테이블을 채우기 위해 다른 오브젝트에 넣으려고합니다.

내가하려는 일을 할 수 있습니까? 객체 배열의 객체보다 데이터를 설정하는 쉬운 방법이 있습니까?

Answer 1

테이블 내부에서 가능한지 확실하지 않지만 부트 스트랩 열을 만들고 테이블처럼 보이도록 사용자 정의 CSS를 추가 할 수 있습니다. 또한 여러 배열을 갖는 대신 "type"및 "name"과 같은 추가 속성을 가진 하나의 객체 배열을 가질 수 있습니다. 현재 데이터는 다음과 같습니다. AngularJS와에서

$scope.data = [{ name:'Apple', color: 'red', healthy: true, type: 'Fruits'}, { name:'Orange', color: 'orange', healthy: true, type: 'Fruits'}, { name:'Grape', color: 'purple', healthy: true, type: 'Fruits'}, { name:'Candy', color: 'pink', healthy: false, type: 'Sweets'}];

, 당신은 속성을 기준으로 항목을 그룹화 당신은 각 필터를 포함 할 수 있습니다. 상자 안에 들어있는 상자는 orderBy입니다. groupBy을 사용해야하는 경우 'angular-filter'을 앱에 포함해야합니다. 각도 필터 here에 대한 자세한 내용을 읽을 수 있습니다.

희망 jsfiddle이 도움이됩니다.