angularjs材料设计和flex布局

【问题标题】：angularjs material design and flex layoutangularjs材料设计和flex布局
【发布时间】：2015-09-03 11:54:22
【问题描述】：

我用 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 值或者实际上合并两个 flex 并使其成为一个。

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

【问题讨论】：

标签： angularjs material-design

【解决方案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>

【讨论】：