Question

我正在使用角度材质行和列布局构建动态表。我正在使用ng-repeat来构建基于名为scope.tableLayout的对象数组中的预定义列的列。每个对象都有一个flex值。我想要做的是根据对象中的flex值设置表格列宽。有没有办法做到这一点？

我附上表格的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'        
    }
})

Answer 1

我一发现这个问题，就发现了我的问题 - 需要使用把手！

flex = "{{col.flex}}"

它现在有效。

Working Fiddle

角重材料在ng-repeat元素中弯曲

1 个答案: