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

我有一个代码，我想在两个不同的行内迭代元素。是否有可能使用单个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>

将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的例子:

父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}}

相关内容

最新更新

热门标签：