3
ng-repeatというリストからループ内のいくつかのボックスを含むラッパーがあります。ラッパーの固定高さは300pxです。リストをループしてlengthが1であるので、1つのボックスしかないので、ラッパーの全領域を埋めるために、ng-classというクラスをクラスに追加します。これは正常に動作します。すべての子の高さを親の固定高さの50％に設定します
リストに複数のボックスがある場合は、ボックスのheightをラッパーの50%に設定します。カットされたボックスには3つのボックスがあり、heightは150px（すべて）です。だから、最初の2つのボックスも150pxheightを持っている必要があり150pxのheightと3番目のボックスで300pxラッパーの半分を使用する必要がありますが、それは（以上2つのボックスのためのoverflow: auto;してスクロールバー）は見えないのです。私もng-classでこれを試して、heightを50%に設定しましたが、動作しませんでした。何か案は？
angular.module("myApp", []).controller("myController", function($scope) {
$scope.myList1 = [{
id: 1,
name: "Box 1"
}];
$scope.myList2 = [{
id: 1,
name: "Box 1"
},
{
id: 2,
name: "Box 2"
}, {
id: 3,
name: "Box 3"
}
];
});body {
height: 100vh;
width: 100vw;
}
.wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
border: 1px solid blue;
overflow: auto;
height: 300px;
}
.box {
display: flex;
flex-direction: column;
flex: 0 0 auto;
background-color: orange;
border-bottom: 1px solid red;
}
.fillBox {
flex: 1 1 auto;
}
.fillHalfBox {
height: 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div class="wrapper">
<div class="box" ng-repeat="box in myList1" ng-class="{fillBox: myList1.length == 1}">
{{box.name}}
</div>
</div>
<div class="wrapper">
<div class="box" ng-repeat="box in myList2" ng-class="{fillHalfBox: myList2.length > 1}">
{{box.name}}
</div>
</div>
</div>
この出力をしますか？ https://i.stack.imgur.com/V97y9.png –
実際にあなたのコードは、PTAが述べたようにタイプミスを修正すると動作するようです。 – Pete
@SahilDhirボックスはフレックス方向の列で表示する必要があります。一列に – MrBuggy