當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屬性的屬性

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>