2015-11-15 94 views
0

我正在使用角材料行和列布局構建動態表格。我正在使用ng-repeat基於名爲scope.tableLayout的對象數組中的預定義列構造列。每個對象都有一個彈性值。我想要做的是根據對象中的flex值設置表格列的寬度。有沒有辦法做到這一點?ng-repeat元素中的角度材料彎曲

我的JSfiddle表格附加了我試圖將flex設置爲flex =「col.flex」而沒有運氣的地方。任何幫助表示讚賞。 My Code in JSfiddle

<div ng-app="myApp" ng-controller="mainCtrl"> 
    <script type="text/ng-template" id="/template"> 
     <button ng-click="testFn()">Test</button> 
     <div layout="row"> 
      <div flex='col.flex' ng-repeat="col in column"><span>HEADER{{$index}}</span> 
       <div layout="column"> 
        <div flex style="border: 1px solid black;" ng-repeat="row in [1,2,3]">{{$index}}</div> 
       </div> 
      </div> 
     </div> 
    </script> 

    <form-table table-layout=tableLayout|filter:{table_id:1}></form-table> 
</div> 


var app = angular.module('myApp', ['ngMaterial']); 
app.controller('mainCtrl', function($scope) { 
    $scope.tableLayout =[{"head_id":"GAP Assessment","table_id":"1","table_name":"GAP Table","element_id":"0","element_name":"Action Reference","sort_order":"0","is_multirow":"1","flex":"30","element_sort_order":"4","is_show":"0"},{"head_id":"GAP Assessment","table_id":"1","table_name":"GAP Table","element_id":"1","element_name":"Audit Criteria","sort_order":"0","is_multirow":"1","flex":"30","element_sort_order":"0","is_show":"1"},{"head_id":"GAP Assessment","table_id":"1","table_name":"GAP Table","element_id":"3","element_name":"Document Reference","sort_order":"0","is_multirow":"1","flex":"10","element_sort_order":"3","is_show":"1"}] 
}); 
app.directive('formTable', function() { 
    return { 
     scope:{tableLayout:'&'}, 
     link: function(scope,element,attrs){ // normal variables rather than actual $scope, that is the scope data is passed into scope 

        scope.column=scope.tableLayout(); 
        scope.testFn=function(){ 
         console.log(scope.tableLayout()); 
        } 



        //function and scopes go here 
       },//return 
     transclude:true, 
     templateUrl: '/template', 
     restrict: 'E'   
    } 
}) 

回答

0

只要我張貼了這個問題,我發現我的問題 - 需要使用車把!

flex = "{{col.flex}}" 

現在的作品。

Working Fiddle