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>

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

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

是否可以从控制器实现？

Answer 1

您需要将flex-value保持在控制器的范围内：

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>

angularjs材料设计和柔性布局

1 个答案: