Question

我希望div具有随机高度。但是我在ng-style中的随机高度函数只被调用一次，并将相同的随机高度应用于所有div

这是我的HTML：

<div id = "{{result.myId}}"ng-repeat="result in results" ng-style = "resultBox" ng-click="loadDetails(result.myId)">
    <div ng-style="setImage(result.miThumbnail)"></div>
    <h5>{{result.name}}</h5>
</div>

JS：

$scope.resultBox = {
            backgroundColor:'#ffffff',
            height: $scope.randomHeight(200)+'px',
            position:'relative',
            textAlign:'center',
            verticalAlign:'top',
            width:'260px',
            display:'inline-block',
            margin:'10px',
            borderRadius:'5px'
        };

 $scope.randomHeight = function(max){
            var height = Math.floor((Math.random()*max)+1);
            return height;
        };

Answer 1

问题是您的$scope.randomHeight(200)只运行一次并重复使用。尝试将$scope.resultBox转换为函数。

$scope.resultBox = function(){ 

        return {
            backgroundColor:'#ff0000',
            height: $scope.randomHeight(200)+'px',
            position:'relative',
            textAlign:'center',
            verticalAlign:'top',
            width:'260px',
            display:'inline-block',
            margin:'10px',
            borderRadius:'5px'
        };

       }

同时更改您的html以调用此功能：ng-style="resultBox()"

DEMO

Answer 2

尝试使用功能：

<div id = "{{result.myId}}"ng-repeat="result in results" ng-style = "resultBox()" ng-click="loadDetails(result.myId)">
    <div ng-style="setImage(result.miThumbnail)"></div>
    <h5>{{result.name}}</h5>
 </div>

和

   $scope.resultBox = function() {
        backgroundColor:'#ffffff',
        height: $scope.randomHeight(200)+'px',
        position:'relative',
        textAlign:'center',
        verticalAlign:'top',
        width:'260px',
        display:'inline-block',
        margin:'10px',
        borderRadius:'5px'
    };

    $scope.randomHeight = function(max){
        var height = Math.floor((Math.random()*max)+1);
        return height;
    };

ng重复的随机高度

2 个答案: