如何使用Angular Material实现动态flex值

Question

我正在尝试构建一个具有不确定数量的子div的div，我希望当div只有一个时，子div有flex="100"，它占据整行。如果有多个子div（即使有三个或四个子元素），它们都应该具有正确的flex="50"，这将占用该行的一半。

知道我怎么能这样做？提前致谢。

Answer 1

另一种方式是<div flex="{{::flexSize}}"></div>和控制器定义和修改flexSize，例如$scope.flexSize = 50;

Answer 2

感谢@William S的帮助，我不应该使用flex box来进行静态大小的布局。

所以我使用ng-class来解决我的问题。

HTML：

<div flex layout-fill layout="column" layout-wrap>
    <div ng-repeat="function in functions" ng-class="test" class="card-container">
        <md-card>
            contents
        </md-card>
    </div>
</div>

我的CSS如下：

.test1 {
  width: 100%;
}

.test2 {
  width: 50%;
}

$scope.test的初始值是'test1'，通过将值从'test1'更改为'test2'，子div的宽度将设置为50％。

Answer 3

在元素内定义“flex”将始终尝试占用父级允许的最大空间，而不提供任何flex参数。这需要伴随layout =“row / column”，因此flex会向正确的方向扩展。

这是你在找什么？ http://codepen.io/qvazzler/pen/LVJZpR

请注意，最终，项目将开始在父级大小之外增长。您可以通过多种方式解决此问题，但我认为这超出了问题的范围。

HTML

<div ng-app="MyApp" ng-controller="AppCtrl as ctrl">
  <h2>Static height list with Flex</h2>
  <md-button class="thebutton" ng-click="addItem()">Add Item</md-button>
  <div class="page" layout="row">
    <md-list layout-fill layout="column">
      <md-list-item flex layout="column" class="listitem" ng-repeat="item in items" ng-click="logme('Unrelated action')">
        <md-item-content layout="column" md-ink-ripple flex>
          <div class="inset">
            {{item.title}}
          </div>
        </md-item-content>
      </md-list-item>
    </md-list>
  </div>
</div>

CSS

.page {
  height: 300px; /* Or whatever */
}

.thebutton {
  background-color: gray;
}

.listitem {
  /*height: 100px;*/
  flex;
  background-color: pink;
}

JS

angular.module('MyApp', ['ngMaterial'])
  .controller('AppCtrl', function($scope) {
    $scope.items = [{
      title: 'Item One',
      active: true
    } ];

    $scope.addItem = function() {
      newitem = {
      title: 'Another item',
      active: false
    };

      $scope.items.push(newitem);
    }

    $scope.toggle = function(item) {
      item.active = !item.active;
      console.log("bool toggled");
    }

    $scope.logme = function(text) {
      alert(text);
      console.log(text);
    }
  });

Answer 4

使用以下：

scope.flexSize = countryService.market === 'FR'? 40: 50;

---

<div flex="{{::flexSize}}">