Question

我有两列都包含来自同一数组的项目。我希望实现砌体效果，因为每个.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>

Angular会对排序数组进行奇偶替换，还是将元素存储在数组中？

Answer 1

Angular将在元素存储在数组中的方式上交替。如果你想组织数组，我会在分配给Angular $ scope之前使用.sort（）。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

根据尝试下面的代码，似乎Angular在基于$odd过滤器排序后会应用$even和orderBy。但是，这只能在单个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或允许您指定条件属性的其他指令可能更简单。

Answer 3

Angular orderBy过滤器返回源数组的副本。 ng-repeat已应用于副本。

您的示例案例将起作用，但它会创建两倍$watch个元素，如果行数发生变化，您可能会遇到奇怪的数据在列之间来回移动的闪烁。此外，由于数组基于0，因此您的行将向后。

orderBy如何在AngularJS中使用$ odd和$ even？

3 个答案: