Question

我有一个代码，我想在两个不同的行内迭代元素。是否可以使用单个ng-repeat来完成它，因为我需要修复上面的行列结构。内容应该是动态的吗？

<div class="row sortable">
   <div class="col-md-6">
      <div class="row">
         <div class="col-md-12" ng-repeat="graph in graphs" ng-if="$even">
            <div> content.....</div>
         </div>
      </div>
   </div>
   <div class="col-md-6">
      <div class="row">
         <div class="col-md-12" ng-repeat="graph in graphs" ng-if="$odd">
            <div> content.....</div>
         </div>
      </div>
   </div>
</div>

Answer 1

只需将ng-repeat设置为rows的父级，如下所示：

<div class="row sortable">
    <div class="col-md-6">
        <div class="col-md-12" ng-repeat="graph in graphs">
            <div class="row" ng-if="$even">
                <div> content.....</div>
             </div>
             <div class="row" ng-if="$odd">
                <div> content.....</div>
             </div>
        </div>
    </div>
</div>

<强>更新

如果您不想重复<div class="row>，则可以创建HTML template并在HTML父级上使用两个ng-include不同的控制器。我创建了一个Plunker example：

父HTML：

<body ng-app="includeExample">
  <div ng-controller="ExampleController">
    <div ng-controller="TemplateController1">
      <div ng-include="template"></div>
    </div>
    <div ng-controller="TemplateController2">
      <div ng-include="template"></div>
    </div>
  </div>
</body>

JS文件：

(function(angular) {
  'use strict';
angular.module('includeExample', ['ngAnimate'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.template = "template1.html";
  }])
  .controller('TemplateController1', ['$scope', function($scope) {
    $scope.foo = "bar";
  }])
  .controller('TemplateController2', ['$scope', function($scope) {
    $scope.foo = "test";
  }]);
})(window.angular);

模板：

{{foo}}

在两个diff结构中使用ng-repeat迭代元素

1 个答案: