メニューに項目を追加するときにdivを左メニュー高さに拡大

Question

アイテムを追加または削除できる左メニューがあります。右側には最小の高さを持つコンテンツdivがあります。

angleを使用して左メニューにアイテムを追加するとき、左メニューの高さがmin-heightより大きい場合、コンテンツdivの左のメニューの高さを拡大します。

さらにもう1つのことは、コンテンツdivのng-animateのプルダウンエフェクトも欲しいということです。 link

var app = angular.module('myApp', ['ngAnimate']); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.items = ['foo', 'bar']; 
 
    var num = 0;  
 
    $scope.add = function() { 
 
    $scope.items.push(num); 
 
    num++; 
 
    } 
 
});

#left { 
 
    width: 25%; 
 
    background-color: lightblue; 
 
    float: left; 
 
} 
 

 
#right { 
 
    width: 75%; 
 
    float: left; 
 
    background-color: lightgreen; 
 
    min-height: 200px 
 
} 
 

 
.item { 
 
    height: 20px; 
 
    opacity: 1; 
 
    transition: 0.5s; 
 
} 
 

 
.item.ng-enter { 
 
    opacity: 0; 
 
    height: 0;  
 
} 
 

 
.item.ng-enter-active { 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<script src="https://code.angularjs.org/1.5.7/angular-animate.min.js"></script> 
 

 
<div id="wrapper" ng-app="myApp" ng-controller="myCtrl"> 
 
    <div id="left"> 
 
    <p class="item" ng-repeat="item in items"> 
 
     {{item}} 
 
    </p> 
 
    </div> 
 
    <div id="right"> 
 
    <button ng-click="add()">add</button> 
 
    {{names}} 
 
    </div> 
 
</div>

Answer 1

ハックDOM操作の必要はjQueryのかng-style使用：コントローラに続いて

<div id="right" ng-style="{height: hgt+ 'px'}">

：私はNGスタイルのディレクティブを使用してそれを行うために管理しました。単なるラッパーにdisplay: flexを追加します。

フレキシボックスを使用して

#wrapper { 
    display: flex; 
} 

https://jsfiddle.net/babvqx8e/26/

もあなたは山車を削除することができます：

#left { 
    width: 25%; 
    background-color: lightblue; 
} 

#right { 
    width: 75%; 
    background-color: lightgreen; 
    min-height: 200px 
} 

は、より多くの情報のため、このreally nice guide to Flexboxを参照してください。

Answer 2

利用のjQuery：ここ

はフィドルリンクです

$("#right").css({'height': $("#left").outerHeight()}); 

それは#leftの外側の高さに#rightの高さを設定します。

Answer 3

私は私の質問に答えます。

$scope.hgt = $('#left').outerHeight() + 40;

http://jsfiddle.net/babvqx8e/22/