ng-repeat上的隨機高度

我想擁有隨機高度的div。然而，在NG-風格我隨機高度函數被調用一次，和相同的隨機高度適用於所有divng-repeat上的隨機高度

這裏是我的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; 
     };

來源

2013-12-21 William Falcon

的問題是你的$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

來源

2013-12-21 05:55:31

謝謝。側面問題：由於高度是隨機的，邊緣之間的差距保持打開，我該如何調整邊距差距， –

@William Falcon：根據隨機高度來調整邊距：'10px'。由於這是一個函數，所以你可以做'var height = $ scope.randomHeight（200）'這樣的東西，並使用高度來計算邊距。（如果這是你需要的） –

嘗試使用功能：

<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; 
    };

來源

2013-12-21 05:56:41 cyberwombat

ng-repeat上的隨機高度

回答

相關問題