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'
}
})