Добавить класс, когда тег div переполняется

Question

У меня есть div с фиксированной высотой и шириной, я добавляю в него некоторый контент, используя ng-repeat, я хочу добавить класс в этот div, когда он переполняется. Я попытался добавить класс с length, но не работал.

var app = angular.module('myApp', []); 
 
app.controller('personCtrl', function($scope) { 
 
    $scope.placeholder = ['Koenigsegg CCXR Trevita', 
 
    'Lamborghini Veneno', 
 
    'W Motors Lykan Hypersport', 
 
    'Bugatti Veyron', 
 
    'Ferrari Pininfarina Sergio', 
 
    'Pagani Huayra BC', 
 
    'Ferrari F60 America', 
 
    'Bugatti Chiron', 
 
    'Koenigsegg One', 
 
    'Koenigsegg Regera' 
 
    ]; 
 
});

div { 
 
    height: 40px; 
 
    width: 400px; 
 
    background: #f2f2f2; 
 
    padding: 5px; 
 
} 
 
span { 
 
    border: 1px solid #999; 
 
    padding: 3px; 
 
    display: inline-block; 
 
    margin: 2px; 
 
    border-radius: 3px; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="personCtrl"> 
 
    <span ng-repeat="j in placeholder;"> 
 
    {{j}} &times; 
 
    </span> 
 

 
</div>

Примечание: я могу использовать только javascript или angularjs

Answer 1

Если вам нужно только добавить некоторый класс, когда есть слишком много элементов в массиве, вы можете использовать ng- class.

var app = angular.module('myApp', []); 
 
app.controller('personCtrl', function($scope) { 
 

 
});

div{height:100px;width:100px;background:#f2f2f2;border:1px solid #000} 
 
div.too-long {background-color: #FF6666}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="personCtrl" ng-class="{'too-long': placeholder.length > 6}" ng-init="placeholder=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]"> 
 
    <span ng-repeat="j in placeholder;"> 
 
    {{j}} Content 
 
    </span> 
 

 
</div>

Но если вам нужно сравнить размер содержимого и размер Div, вы можете использовать offsetHeight и scrollHeight свойства вашего DIV

var app = angular.module('myApp', []); 
 
app.controller('personCtrl', function($scope, $element) { 
 
    $scope.placeholder = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18] 
 
    $scope.overflow = function() { 
 
     return $element[0].scrollHeight > $element[0].offsetHeight; 
 
    } 
 
});

div{height:100px;width:100px;background:#f2f2f2;border:1px solid #000} 
 
div.too-long {background-color: #FF6666}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="personCtrl" ng-class="{'too-long': overflow()}"> 
 
    <span ng-repeat="j in placeholder;"> 
 
    {{j}} Content 
 
    </span> 
 

 
</div>