將屏幕的另一端的ng-repeat結束改爲屏幕

我在一個帶有一些數據的div中有一個ng-repeat。我基本上想要的是將數據輸出到屏幕的左側。到達時，它會移動到屏幕的右側。屏幕的高度是ng-repeat有多長時間的結果。有人能幫助我嗎？將屏幕的另一端的ng-repeat結束改爲屏幕

left side of right side of 
    the screen  the screen 
_____________________________ 
| ng-repeat | data11 | 
| data1  |  .  | 
|  .  |  .  | 
|  .  |  .  | 
|  .  |  .  | 
|  .  |  .  | 
|  .  |  .  | 
|  .  |  .  | 
|  .  |  .  | 
|  .  |  .  | 
|  .  |  .  | 
|  .  |  .  | 
| data10  | data20 | 
|_______________|_____________|

來源

2014-06-20 Mike

手段說，在第一列數據1 - DATA10，第二列data11-資料20，即其餘則在thired列之後即data21- data30，等等...我說的對 –

@NidhishKrishnan幾乎。它更像是，如果有數據1 - 數據6，則左側將是data1-data3，右側將是data4 - data6。所以該面板的高度將取決於該陣列中的數據數量。 – Mike

說，如果你有20個數據的，從陣列，你可以通過使用功能.length得到的長度，在左側的右手側，10和10，在Angular JS同時通過填充值ng-repeat，可以通過使用像limitTo填充左側內的第一半如下所示

ng-repeat="val in values|limitTo:ceil(values.length/2)"

這裏ceil的用法是說如果你有23個數據，那麼你不可能得到完美的一半，這樣左邊或右邊應該累積一個額外的數字，即左邊12個和右邊11個

enter image description here

limitTo在角JS限制在NG-重複的數字濾波器，語法如下

{{ limitTo_expression | limitTo : limit}}

而且要使用ceil函數中limitTo已注入給出到您的scope，

最簡單的方法，你可以做

$scope.ceil = Math.ceil;

在您的控制器。Angular的方式做正確，這將通過使用

ng-repeat="val in values|limitTo:-values.length/2"

看看這個例子

HTML

可以創建一個 Math服務

同樣在右側您可以填寫

Working Demo

<div ng-app ng-controller="ArrayController"> 
    <div class="left"> 
     <span ng-repeat="val in values|limitTo:ceil(values.length/2)">{{val}} 
      <br/> 
     </span> 
    </div> 
    <div class="right"> 
     <span ng-repeat="val in values|limitTo:-values.length/2">{{val}} 
      <br/> 
     </span> 
    </div> 
</div>

腳本

angular.module("app", []) 
.controller('ArrayController', function ($scope) { 
    $scope.ceil = Math.ceil; 
    $scope.values = ['data1', 'data2', 'data3', 'data4', 
     'data5', 'data6', 'data7', 'data8', 
     'data9', 'data10', 'data11', 'data12', 
     'data13', 'data14', 'data15', 'data16', 
     'data17', 'data18', 'data19', 'data20']; 
});

來源

2014-06-22 12:20:19

是的，謝謝你，先生！我已經實現了我的代碼，它工作完美=]！ – Mike

就像我之前說過的，謝謝你的回答先生。但是我得到了一個新的問題。如果我想將新數據推送到數組，它將不會顯示正確的數據。有時它會將它推到數組中，但它不會在視圖中更新..你知道如何解決這個問題嗎？ – Mike

因爲它提出了一個新的SO問題 –

只需重複第一列中的前半部分數據，其餘列在第二列中。 limitTo過濾器將幫助你。注意它的第二個參數可以是一個負數。

此外，由於limitTo truncates the number通過，如果您可能有奇數個項目，則您需要ceil。

$scope.ceil = Math.ceil;

<ul id="myFirstColumn"> 
    <li ng-repeat="data in dataList | limitTo:ceil(dataList.length/2)"></li> 
</ul> 
<ul id="mySecondColumn"> 
    <li ng-repeat="data in dataList | limitTo:-dataList.length/2"></li> 
</ul>

來源

2014-06-21 18:16:52 Blackhole

是的，謝謝你，我看到了NidhishKrishsnan的代碼，但他們基本上是一樣的，所以謝謝你！ – Mike

他們完全一樣，但他更詳細。我很高興你解決了你的問題！ – Blackhole

將屏幕的另一端的ng-repeat結束改爲屏幕

回答

相關問題