如何使用 Angular Material 实现动态弹性值

Question

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

知道我该怎么做吗？提前致谢。

Answer 1

在元素内定义 "flex" 将始终尝试占用父元素允许的最大数量的 space，而不向 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 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

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

Answer 4

使用如下：

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

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

如何使用 Angular Material 实现动态弹性值

How to implement dynamic flex value with Angular Material

layout

angular-material