How to implement dynamic flex value with Angular Material

问题

I'm trying to build a div with uncertain number of child divs, I want the child div have flex="100" when there is only one of them, which takes the entire row. If there are more than one child divs (even if there are three or four child elements), they should all have exactly flex="50", which will take half of the row.

Any idea how could I do that? Thanks in advance.

回答1:

Another way is <div flex="{{::flexSize}}"></div> and in controller define and modify flexSize e.g $scope.flexSize = 50;

回答2:

Thanks for the help from @William S, I shouldn't work with flex box for a static size layout.

So I work with ng-class to solve my problem.

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>

My CSS is like the following:

.test1 {
  width: 100%;
}

.test2 {
  width: 50%;
}

The initial value of $scope.test is 'test1',by changing the value from 'test1' to 'test2', the width of children divs will be set to 50%.

回答3:

Defining "flex" inside an element will always try to take up the most amount of space that the parent allows, without supplying any parameters to flex. This needs to be accompanied by layout="row/column", so flex expands in the right direction.

Is this what you're looking for? http://codepen.io/qvazzler/pen/LVJZpR

Note that eventually, the items will start growing outside the parent size. You can solve this in several ways, but I believe this is outside the scope of the question.

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;
}

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);
    }
  });

回答4:

Use below :

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

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

来源：https://stackoverflow.com/questions/31529966/how-to-implement-dynamic-flex-value-with-angular-material

标签

layout

angular-material