当我在 angular material 中添加新项目时，layout="row" 的高度没有改变

Question

我有 html 这样的：

<body layout="row" ng-app="myApp" ng-cloak="ng-cloak" ng-controller="main">
  <md-content flex="100" layout="row" class="management-panelmd-background md-hue-1">
    <md-card class="md-whiteframe-4dp detail">
      <div layout="row" layout-align="begin begin" ng-repeat="item in vm.managementPanelsFields" style="margin-bottom: 30px;" class="row flex">
        <div flex="40" ng-show="item.isVisible">{{item.name}}</div>
        <div flex="60" ng-show="item.isVisible" class="spacing">
          <div ng-if="item.IsMultipleValue" class="multiple">
            <ul>
              <li ng-repeat="e in item.value track by $index" layout="row" layout-align="begin end">
                <div ng-if="item.fieldType == 'Int'" flex="45">
                  <md-input-container>
                    <label>{{item.watermarkText}}</label>
                    <input type="number" name="{{item.id}}-{{$index}}" ng-pattern="item.regexValidation" ng-required="item.isRequired" ng-model="item.value[$index]"/>
                  </md-input-container>
                </div>
                <div ng-if="item.complementary" flex="45">
                  <div ng-if="item.complementary.fieldType == 'Dropdown'">
                    <md-select ng-model="item.complementary.value[$index]">
                      <md-option ng-repeat="(key, value) in item.complementary.options" value="{{key}}">{{value}}</md-option>
                    </md-select>
                  </div>
                </div>
                <div flex="10" class="delete"><a ng-click="deleteValue(item, $index)">X</a></div>
              </li>
            </ul>
            <md-button ng-click="newValue(item)" class="md-raised md-primary">ADD</md-button>
          </div>
          <div ng-if="!item.IsMultipleValue" layout="row">
            <div ng-if="item.fieldType == 'TextArea'" flex="100" ng-class="{error: form[item.id].$error}">
              <textarea name="{{item.id}}" ng-trim="false" ng-required="item.isRequired" ng-pattern="item.regexValidation" placeholder="{{item.watermarkText}}" ng-model="item.value"></textarea>
            </div>
          </div>
        </div>
      </div>
    </md-card>
  </md-content>
</body>

当我使用添加按钮创建动态输入时，该按钮位于输入旁边的文本区域上方，并且具有 ng-repeat="item in vm.managementPanelsFields" 的 div 的高度没有即使内容有更大的高度也要改变。

这里是code pen

Answer 1

您可以将 overflow-y:scroll 添加到 ng-repeat="item in vm.managementPanelsFields" 的样式属性像这样 style="margin-bottom: 30px;overflow-y:scroll;"

Answer 2

高度不会改变，因为您使用的是 flex。每行都设置为 flex: 1，这意味着行之间的高度比将是 1:1 = 相同的高度。

您的容器有 flex: 1 1 100%：这定义了内容的总高度将是屏幕高度的 100%，因此，每行将占据屏幕的 50%。我只能从你的问题中推断这不是你想要的。

您可以删除 layout="row"

md-content.management-panelmd-background.md-hue-1(flex="100")

这将解决动态高度问题。你没有说你要求的布局是什么，所以我建议我自己的。

Answer 3

因为你有下面的flex class。删除它，它将正常工作。

.row.flex(layout="row", layout-align="begin begin", ng-repeat="item in vm.managementPanelsFields", style="margin-bottom: 30px;")

(function() {
  'use strict';
  angular
    .module('SampleApp', ['ngMaterial'])
    .controller('AppCtrl', function() {
      var vm = this;
      vm.managementPanelsFields = [{
        name: 'Foo',
        isVisible: true,
        IsMultipleValue: true,
        value: [],
        id: 10,
        fieldType: 'Int'
      }, {
        fieldType: 'TextArea',
        isVisible: true,
        IsMultipleValue: false,
        id: 20
      }];

      vm.newValue = function(item) {
        item.value.push(100);
      };
      vm.deleteValue = function(item, index) {
        item.value.splice(index, 1);
      }
    });
})();

<html ng-app="SampleApp">

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</head>

<body ng-cloak="ng-cloak" ng-controller="AppCtrl as vm">
  <md-content>
    <md-card class="md-whiteframe-4dp">
      <md-card-content style="margin-bottom: 30px;">
        <div layout="row" ng-repeat="item in vm.managementPanelsFields">
          <div flex="40" ng-if="item.isVisible && item.IsMultipleValue">{{item.name}}</div>
          <div flex ng-if="item.isVisible && item.IsMultipleValue && item.fieldType === 'Int'">
            <md-input-container ng-repeat="itemValue in item.value track by $index" class="md-block">
              <label>{{item.watermarkText}}</label>
              <input type="number" name="{{item.id}}-{{$index}}" ng-pattern="item.regexValidation" ng-required="item.isRequired" ng-model="itemValue" />
              <md-icon ng-click="vm.deleteValue(item, $index)">clear</md-icon>
            </md-input-container>
            <div layout="row" layout-align="center center">
              <md-button ng-click="vm.newValue(item)" class="md-raised md-primary">ADD</md-button>
            </div>
          </div>
          <div flex ng-if="item.isVisible && !item.IsMultipleValue && item.fieldType === 'TextArea'" layout="row" layout-align="center center">
            <textarea name="{{item.id}}" ng-trim="false" ng-required="item.isRequired" ng-pattern="item.regexValidation" placeholder="{{item.watermarkText}}" ng-model="item.value"></textarea>
          </div>
        </div>
      </md-card-content>
    </md-card>
  </md-content>
</body>

</html>

当我在 angular material 中添加新项目时，layout="row" 的高度没有改变

The height of layout="row" don't change when I'm adding new items in angular material

javascript

css

angularjs

angular-material