AngularJS：ng-repeatのdivに同じ高さを設定しました

Question

私はAngular + Angular Mobile UIを使用してphonegapでアプリを開発しています。

ブートストラップカラム内のテンプレートファイルにdivのリストがありますjQueryを使用しないで。私は、Bootstrap列の幅に応じて高さを適用するdivを四角形にする必要があります。それは本当に簡単なスクリプトでなければなりませんが、私は対処できません。ここで

は私のテンプレートです：

<div ng-controller="ControllerIndex as Ctrl" item-list>  
    <div ng-repeat="item in items" > 
     <div class="col-xs-4 object-list-container"> 
      <div class="object-list" > 
       <p ng-bind-html="item.name"></p> 
      </div> 
     </div> 
    </div>  
</div> 

template.htmlは、ここに私のコントローラです：

angular.module('app').controller('ControllerIndex', function ($scope, $http, $element) { 
    $scope.items =[]; 

    $http.get(baseUrl +'data/item.json').success(function(data){ 
     $scope.items = data.item; 
    }).error(function(){ 
     commonError(); 
    }); 

は}）;

、ここで私のディレクティブ：

angular.module('app').directive('itemList', function($timeout){ 
    return { 
     link: function ($scope, $element, $attrs) { 
     //I tried a lot of things 
     $timeout(function(){ 
       var elements = document.getElementsByClassName("object-list"); 
       console.log(elements); //Gives an array of 2 
       var elementsLenght = elements.length; 
       console.log(elementsLenght); //Gives 0!!!!!! 
      }); 

      //Get the max height and set to the other div, but i can't enter this cycle 
      for (var i = 0; i < elementsLenght; i++) { 
        var elementHeight = elements[i].offsetHeight; 
        //console.log(elementHeight); 
        if (elements[i].offsetHeight > maxHeight) { 
         maxHeight = elementHeight; 
        } 
       }  


     //Attempt number 2 
var angularElement = angular.element($element); 
var elementObject = angular.element($element[0].querySelector('.object-list')); 
console.log(elementObject); //Gives a T object with lenght 0 
      var xx = angular.element(elementObject[0]); 
      console.log(xx.offsetHeight); 
      console.log('elementObject: ', angular.element(elementObject[0])); //Gives html  


     } 
    } 
}); 

私は私が何かが欠けていると思います。ありがとうございました！

Answer 1

ng-repeatが読み込みを終了したときにng-repeatの一部となるようにディレクティブを作成し、そのディレクティブで最後のロードが完了したことを検出したら、最初に試行した解決策を実行します。

テンプレート：

<div ng-controller="ControllerIndex as Ctrl">  
    <div ng-repeat="item in items" item-list> 
     <div class="col-xs-4 object-list-container"> 
      <div class="object-list" > 
       <p ng-bind-html="item.name"></p> 
      </div> 
     </div> 
    </div>  
</div> 

指令：

angular.module('app').directive('itemList', function($timeout){ 
    return { 
     link: function ($scope, $element, $attrs) { 
      if ($scope.$last){ 
       var elements = document.getElementsByClassName("object-list"); 
       var maxHeight = 0; 
       //Get the max height and set to the other div 
       $timeout(function(){ 
        for (var i = 0; i < elements.length; i++) { 
         var elementHeight = elements[i].offsetHeight; 
         //console.log(elementHeight); 
         if (elements[i].offsetHeight > maxHeight) { 
          maxHeight = elementHeight; 
         } 
        }  
       }); 
      } 
     } 
    } 
}); 

Answer 2

私は長い間、同じ問題で戦いました。いずれかの高さが変更されたときにdivの高さを結合します。これは今日まで私を助ける角度の指示です。使用するには

var app = angular.module('app'); //insert your module name instead 

function bind_height() { 
    function doforthiselem(me) { 
     var value = $(me).attr("bind-height"); 
     var elems = $("[bind-height='" + value + "']"); 
     var heights = elems.toArray().map(function (elem) { return $(elem).height(); }); 
     if (Math.max.apply(me, heights) > Math.min.apply(me, heights)) $(me).height(Math.max.apply(me, heights)); 
    } 
    $("[bind-height]").each(function() { 
     doforthiselem(this); 
    }); 
} 

$(window).load(function() { 
    if (typeof app == "undefined") bind_height(); 
}); 

app.directive("bindHeight", function() { 
    return { 
     restrict: 'A', 
     link: function ($scope, element, attrs) { 
      bind_height(); 
      element.bind("DOMSubtreeModified", function() { 
       bind_height(); 
      }); 
     } 
    } 
}); 

は、[バインド-高さ]を設定する必要がある高さあなたが同じ値にバインドしたい要素の属性値。例えば、

<div> 
    <div bind-height="my-binding" style="height: 80px;"> 
     <p>Hello World</p> 
    </div> 
    <div bind-height="my-binding" style="height: 25px;"> 
     <p>Hello America</p> 
     <p>Hello World</p> 
    </div> 
    <div bind-height="my-binding" style="height: 63px;"> 
     <p>Shoot for the stars</p> 
    </div> 
</div> 

その[バインド-高さ]属性その値が「最も高い」のdivの高さにバインドされたその高さを持つことになりますと、「私は、結合」を持っているすべてのdiv。そのうちの1つが変更され、その高さが変更されている場合、他のものも更新されます。 NGリピート状況で

、これもうまく機能...

<div ng-repeat="item in items" bind-height="item-height-bind"> 
    <!--do stuff--> 
</div> 

あなたの要素は、行ごとに3つの列にある場合は、スリーにそれらを結合させるかもしれない...

<div ng-repeat="item in items" bind-height="item-height-{{ceil(($index + 1)/3)}}"> 
    <!--do stuff--> 
</div> 

私はこれがあなたのお役に立てば幸いです。