当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>