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>