javascript - 当 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 大小，您可以使用 div 的 offsetHeight 和 scrollHeight 属性

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>