OrderBy在AngularJS中如何處理$ odd和$甚至？

我有兩列都包含來自同一個數組的項目。我想要達到砌體效果，因爲每個.tile的高度會有所不同。

<div class="col-md-6"> 
    <div class="tile" ng-repeat="item in items| orderBy: 'id'" ng-if="$odd"> 
     <button ng-click="alert($index)"></button> 
    </div> 
</div> 

<div class="col-md-6"> 
    <div class="tile" ng-repeat="item in items| orderBy: 'id'" ng-if="$even"> 
     <button ng-click="alert($index)"></button> 
    </div> 
</div>

Will Angular會對已排序的數組進行奇偶交替還是將元素存儲在數組中？

來源

2015-04-03 Kabir Roy

Angular將在元素存儲在數組中的方式上交替。如果你想組織數組，我將在分配給Angular $ scope之前使用.sort（）。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

來源

2015-04-03 21:24:47

我不認爲這是準確的基礎[這個笨蛋]（http://plnkr.co/edit/RCHA77OzySsSUVwpt14o?p=preview）。 Angular 1.4.x似乎在'orderBy'之後應用'$ odd'和'$ even'屬性。 – 2015-04-03 21:32:25

基礎上嘗試下面的代碼，似乎角並基於該orderBy過濾排序後申請$odd和$even。但是，這隻適用於單個ng-repeat指令。我將修改代碼以如下所示：

angular.module("myApp", []) 
 
    .controller("ItemController", function($scope) { 
 
    $scope.items = [{ 
 
     id: 50 
 
    }, { 
 
     id: 1 
 
    }, { 
 
     id: 2 
 
    }, { 
 
     id: 5 
 
    }, { 
 
     id: 3 
 
    }]; 
 

 
    $scope.alert = function(idx) { 
 
     console.log(idx); 
 
    }; 
 
    });

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
    <div class="col-md-6" ng-controller="ItemController"> 
 
     <div class="tile" ng-repeat="item in items| orderBy: 'id'"> 
 
     <button class="btn btn-danger" ng-if="$odd" ng-click="alert($index)">{{item.id}}</button> 
 
     <button class="btn btn-success" ng-if="$even" ng-click="alert($index)">{{item.id}}</button> 
 
     </div> 
 
    </div> 
 
    </body>

換句話說，你應該應用ng-if指令元素的ng-repeat指令內。根據您想要替換的內容，使用ng-class或允許您指定條件屬性的其他指令可能會更簡單。

來源

2015-04-03 21:41:35

The Angular orderBy過濾器返回源數組的副本。 ng-repeat應用於副本。

您的示例可以正常工作，但它會創建兩倍的元素，並且如果行數發生更改，您可能會在數據列之間來回移動奇怪的閃爍數據。另外，因爲數組是基於0的，所以你的行會倒退。

來源

2015-04-03 21:52:01 Claies

OrderBy在AngularJS中如何處理$ odd和$甚至？

回答

相關問題