ng-grid를 동적으로 생성 할 수 있습니까?

Question

내 웹 프로젝트 중 하나의 일부로 동일한 앱에 ng-grid 인스턴스가 여러 개 필요하며 동적으로 많은 그리드를 만들 수 있습니다 (일반적으로 "새 그리드 추가 ..."버튼을 생각해보십시오). 나는 문서를 통과하고 프로토 타입을 구현하지만 그리드의 설치 예를 들어 데이터를 포함하는 변수의 하드 코딩 된 이름이 포함되어 있음을 발견했습니다했습니다 각도의 .js 컨트롤러에서

을

내가 예를 들어, 대신 변수를 사용하여 시도했다

<div class="gridStyle" ng-grid="gridOptions"> 

:

var mychart = [{...}, {...}]; // data rows 
$scope.gridOptions = { data: $scope.mychart }; 

과 HTML에서

및

<div class="gridStyle" ng-grid="{{gridOptions}}"> 

하지만 성공하지

. 웹에서 찾은 모든 예제는 단 하나의 테이블 만 사용하므로 내 질문에 답이 없습니다. 이것이 어떻게 해결 될 수 있는지 또는이 그리드 시스템의 주요 제한 사항이 있습니까? 감사합니다.

Answer 1

, 당신은 객체의 임의의 수를 필요로하는 자신을 발견 할 때, 당신은 컬렉션을 두는 것이 아니라 그들에게 개별 이름을 부여 생각한다. http://jsfiddle.net/Th47J/

각 옵션에 대한 그리드 확인 : 내가 배열과 NG 반복을 사용하는 웨인의 jsfiddle 업데이트 한 다음이 즉석에서 생성되는 경우 분명히

<div ng-repeat="option in gridOptions" class="gridStyle" ng-grid="option"></div> 

을, 당신은을 업데이트해야합니다 gridOptions 배열은 모든 것을 하드 코딩하지 않고 프로그래밍 방식으로 배열합니다. 그러나 데이터 소스 만 변경되는 경우 매우 쉽습니다.

Answer 2

this과 같은 것이 필요합니까? 평소처럼

I know "Links to jsfiddle.net must be accompanied by code."

Answer 3

글쎄, 나는 마침내 이것을 처리했다. 중요한 점은 새 탭을 추가 할 때마다 데이터 참조 (이 경우 myData [])를 동적으로 생성 할 수 있다는 것입니다 (예 : myData + '['+ myData.length + ']'). 물론 탭과 myData 길이를 동기화하는 것은 독자의 몫입니다.

html로 :

<div id="myTabContent" class="tab-content"> 
    <div class="tab-pane" ng-repeat="tab in tabs" id="{{tab.id}}"> 
     <div class="gridStyle" ng-grid="{{tab.ref}}"></div> 
    </div> 
</div> 

각도 부분 :

$scope.tabs = [ 
     {id: 0, title: 'a', contentId: '#0', data: 'lorem 1', ref:{data: 'myData[0]'}}, 
     {id: 1, title: 'b', contentId: '#1', data: 'lorem 2', ref:{data: 'myData[1]'}}, 
     {id: 2, title: 'c', contentId: '#2', data: 'lorem 3', ref:{data: 'myData[2]'}} 
    ]; 

$scope.myData = [[ 
     {name: "ryan1", surn: "smith1", address:"main square 1", phone:"000000001"}, 
     {name: "ryan1", surn: "smith1", address:"main square 1", phone:"000000001"}, 
     ], 
     [{name: "ryan2", surn: "smith2", address:"main square 2", phone:"000000002"}, 
     {name: "ryan2", surn: "smith2", address:"main square 2", phone:"000000002"}, 
     ], 
     [{name: "ryan3", surn: "smith3", address:"main square 3", phone:"000000003"}, 
     {name: "ryan3", surn: "smith3", address:"main square 3", phone:"000000003"}, 
     ], 
];