angularjs材质设计和弹性布局

Question

我创建了flex = 44，flex = 20和flex = 44的三种布局。 基本上3页在页面上。

<div flex="44"> 

    </div> 
    <div flex="20" class="rightcol"> 

    </div> 
    <div flex="44" class="rightcol"> 
    <div class="" ui-view> 

    </div> 
    </div> 

我想更改flex值或infact合并两个flex并将其作为一个。

是否可以通过控制器实现？

Answer 1

你需要保持柔性价值在控制器的范围：

app.controller("MyCtrl", function ($scope) { 
    $scope.flex1 = function() { return 44; }; 
    $scope.flex2 = function() { return 20; }; 
    $scope.flex3 = function() { return 44; }; 

    $scope.showFlex = function (n) { 
     // your condition whether the flex-ed div should be shown goes in here 
     return true; 
    } 
}); 

你的HTML应该是这样的：

<div ng-controller="MyCtrl"> 
    <div flex="{{flex1()}}" ng-if="showFlex(1)"> 

    </div> 
    <div flex="{{flex2()}}" ng-if="showFlex(2)" class="rightcol"> 

    </div> 
    <div flex="{{flex3()}}" ng-if="showFlex(3)" class="rightcol"> 
    <div class="" ui-view> 
    </div> 
    </div> 
</div>