how use expressions for flex value

[kburson]

i would like to use an expression in my table div flex values within a nested ng-repeat

<div class="table">
  <div class="row" ng-repeat="row in ::data">
      <div class="cell ng-repeat="field in ::fields" flex="field.width">
         {{row[field.name].value}}
      </div>

but this seems to simply add a class name of "flex-" + expression : ie. "flex-field.width"

i tried wrapping in single and double braces, nothin works. when I use ng-class to emulate i get mixed results.

what is the proper way to use expressions with flex?

[Tyrannmisu]

flex in ng-repeats also gave me some headache, because it resulted in elements like this :

<div flex=30 flex=100></div>
 <!--or more specific-->
<div class="flex-30 flex-100"></div>

While only one of the flex values was actually meant to be for this ng-repeat-element and the other was from a previous one.

Nonetheless flex="{{field.width}}" should work, but may produce weird results.
I also tried

<div ng-attr-flex="{{::getFlex($index)}}"></div>
 <!--or-->
<div ng-attr-flex="{{:myFlexModel}}"></div>

This worked also, but i ended up with multiple flex-classes too, while i only wanted one.
What works best for me right now (even if it is not really the angular-material way) is:

<div class=" {{::getFlexString($index)}}"></div>

While $scope.getFlexString(index) returns something like 'flex-30'.

All in all flex with double braces should work(at least it does for me), but you should check if the result is really what you wanted.

Edit: i tested it again right now and the result is:

 <!--'raw html'-->
<div flex="{{test}}"></div>
 <!--'result while 85 is the value of test'-->
<div flex="85" flex-{{test}} flex-85"></div>

So it actually adds the correct flex-value but also some other wrong tags.

[ThomasBurleson]

Whenever possible, provide a CodePen demo!

To expedite resolution, please always test with the latest versions:

• Angular Material HEAD
• Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.js
• Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.css
• RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.js
• RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.css
• AngularJS Latest Release versions:
  • Angular 1.3.19 (or greater)
  • Angular 1.4.6 (or greater).

Can you confirm the issue still exists with the above versions ?