AngularJS 테이블 인터페이스

Question

3 개의 RESTful 데이터 엔드 포인트를 기반으로 AngularJS를 사용하여 테이블 형식 데이터를 표시하는 가장 좋은 방법을 찾으려고합니다.

룸메이트

id 
name 

자질구레

id 
name 

ChoreAssignment

id 
day 
roommate (fk) 
chore (fk) 

를 예를 들어, 데이터는 세 가지 모델로 구성된다

나는 x 축에 하루가 있고 y 축에 룸메이트가있는 테이블에 작업 할당을 표시하려고합니다.

  Mon  Tue  Wed  Thu  Fri  Sat  Sun 
Bob  dishes      mow grass      dishes 
Alice    trash  dishes       sweep 
Mike            dishes vacuum 

난 쉽게 NG-반복과 별도의 목록에서 데이터를 표시 할 수 있지만 표에서 결합에 대한 확신입니다. 이 테이블에 대한 사용자 지정 API 호출을 피하기 위해 노력하고 있는데, 만약 내가 이미 가지고있는 데이터의 세 가지 개별 목록에서이를 간단하게 빌드 할 수 있다면 말입니다. 어떤 조언을 크게 주시면 감사하겠습니다.

Answer 1

컨트롤러에 $scope.choreTable 개체를 구축하기로 결정했습니다 (Underscore.js 사용). $q.all()은 테이블을 작성하기 전에 데이터 약속이 모두 해결되었는지 확인하는 데 사용됩니다.보기에 다음

[ 
    { 
     roommate: {id: 1, name: "Bob"}, 
     days: [[ChoreAssignment1], [], [], [ChoreAssignment2], [], [], [ChoreAssignment1]] 
    }, 
    { 
     roommate: {id: 2, name: "Alice"}, 
     days: [[], [ChoreAssignment3], [ChoreAssignment1], [], [], [ChoreAssignment4], []] 
    }, 
    { 
     roommate: {id: 3, name: "Mike"}, 
     days: [[], [], [], [], [ChoreAssignment1], [ChoreAssignment5], []] 
    } 
] 

과 :

$q.all([roommateQuery, choreQuery, choreAssignmentQuery]).then(function(){ 
    $scope.choreTable = []; 
    var days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; 

    _.each($scope.roommates, function(roommate, i){ 
     $scope.choreTable.push({roommate: roommate, days: []}); 
     _.each(days, function(day, j){ 
      $scope.choreTable[i].days.push(
       _.where($scope.choreAssignments, {roommate: roommate.id, day: day}) 
      ); 
     }); 
    }); 
}); 

과 같이 객체의 결과로 나는이에 대해 알고하지 않았다

<tr ng-repeat="row in choreTable"> 
    <td> 
     [[ row.roommate.name ]] 
    </td> 
    <td ng-repeat="day in row.days"> 
     <div ng-repeat="choreAssignment in day"> 
      [[ choreAssignment.chore.name ]] 
     </div> 
    </td> 
</tr> 

Answer 2

이전보다번 시도해 보셨습니까? 룸 파일에 소스 파일을 설정하면 각 요일을 나타내는 7 개의 열을 작성할 수 있습니다. 소스 파일을 룸메이트에게 설정했기 때문에 각 룸메이트에 대한 테이블에 행이 생성됩니다. 행을 생성 할 때 현재 룸메이트 및 요일과 일치하는 집안일을 찾기 위해 코드를 조합 할 수 있습니다. 나는이 그래서 여기에 따라 (당신이 시작하기 페이지에 표시된 설정을 수행 한 후) 코드 샘플의 비트의 조금 어려울 수도 실현 :보기에

$scope.dtOptions = DTOptionsBuilder.newOptions() 
    .withSource('enter your roommate api call here') 
    }); 

$scope.dtColumns = [ 
    DTColumnBuilder.newColumn('Mon').withTitle('Mon').renderWith(function (data, type, full) { 
     currentRoommate = full.name 
     //write your code here that queries your join table for the roommate name and Monday 
     //return result; 
    }), 
    DTColumnBuilder.newColumn('Tue').withTitle('Tue').renderWith(function (data, type, full) { 
     currentRoommate = full.name 
     //write your code here that queries your join table for the roommate name and Tuesday 
     //return result; 
    }), 
    ...so on until the rest of the week 

을, 그냥 드롭 :

<table id="foobar" datatable="" dt-options="dtOptions" dt-columns="dtColumns"></table> 

약간 자세한 정보이므로 조인 테이블 쿼리를 서비스로 분해 할 수 있습니다. 각도 데이터 테이블에는 API의 API 섹션에서 찾을 수있는 다양한 옵션이 있으므로 원하는대로 테이블의 기능을 조정할 수 있습니다 (정렬 비활성화 등). DTOptionsBuilder 및 DTColumnBuilder에 대한 종속성을 주입하는 것을 잊지 마십시오.

희망 사항은 올바른 방향을 제시합니다.

Answer 3

나는 선택한보기 기간 동안 데이터가 포함 된 중간 개체 (서비스 또는 컨트롤러)를 채 웁니다. 지난 2 주간의 가치를 말해줍니다. 그런 다음 익숙한 ng-repeat를 사용하여 템플릿에서 쉽게 트래버스 할 수 있습니다.

다른 말로보기는 안락한 종점이나 다른 서비스 구조를 신경 쓰지 말고 제시 할 모델을 제공하십시오.