angularjs – 使用ng-repeat索引显示不同的html

发布时间：2020-12-17 17:52:54 所属栏目：安全来源：网络整理

导读：我正在使用Angular和ng-repeat以及 Semantic UI Grid布局. 我试图连续显示5列.达到第五个项目时,创建一个新行.下面为数据中的每个项创建一个新的行和列.我可以看到有一个带有ng-repeat的索引属性,但不知道如何基本上说如果mod 5 == 0输出一个新的行元素,否则

我正在使用Angular和ng-repeat以及 Semantic UI Grid布局.

我试图连续显示5列.达到第五个项目时,创建一个新行.下面为数据中的每个项创建一个新的行和列.我可以看到有一个带有ng-repeat的索引属性,但不知道如何基本上说如果mod 5 == 0输出一个新的行元素,否则只输出一个新列.

<div class="ui grid">
    <div class="row" ng-repeat="item in data.results">
        <div class="column">
            <div class="ui segment">
                {{item.original_title}}
            </div>
        </div>
    </div>
</div>

谢谢您的帮助

解决方法

在我看来,最清洁,最易维护的方式是写一个指令.在您的HTML中,您只需：

<grid source="data.results" break="5" />

在您的JS中,您将数据分解为控制器中的正确结构并使用模板输出：

angular.module('yourApp',[])
    .directive('grid',function() {
      return {
          restrict: 'E',scope: {
            break: '=break',source: '=source'
          },controller: function($scope) {
            var total = Math.ceil($scope.source.length / $scope.break);
            $scope.data = new Array(total);
            for (var i = 0; i < total; ++i) {
              $scope.data[i] = $scope.source.slice(i * $scope.break,(i + 1) * $scope.break);
            }
          },template:
            '<div class="ui grid">' +
            '  <div class="row" ng-repeat="row in data">' +
            '    <div class="column" ng-repeat="item in row">' +
            '      <div class="ui segment">' +
            '        {{item.original_title}}' +
            '      </div>' +
            '    </div>' +
            '  </div>' +
            '</div>',replace: true
      };
  });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!