ng-repeat索引到数组

我有一个angularjs应用程序通过ajax传输数据，我想ng-repeat数据。我有数据流和显示，但现在我想templatize对象。我遇到的问题是我正在使用ng-repeat来简单地索引到控制器中的数组中。我现在需要有一个ng-repeat索引到数组

<div class="row" data-ng-repeat="row in rows"> 
     <div class="span3" data-ng-repeat="col in cols"> 
      //displays the raw json fine 
      {{ data[$parent.$index * numColumns + $index] }}       
      // also displays the raw json 
      {{ item = data[$parent.$index * numColumns + $index] }}       
      <div>Id: {{item.Id}} </div> 
      <div>Title: {{ item.ClientJobTitle }}</div> 
      ... 
     </div> 
    </div>

我总是重复数组索引表达式为每个属性，但也会有几十个属性，因此该代码将是丑陋的，所有的重复计算会慢下来。

什么是正确的（角）方式来做到这一点？

更新我也需要它响应，我将根据窗口宽度动态调整列数。

更新我想我真正想要的是类似下面的非工作示例

 <div class="row" data-ng-repeat="row in rows"> 
     <div class="span3" data-ng-repeat="col in cols"> 
      <div ng-model="data[$parent.$index * numColumns + $index]"> 
       <!-- Here $model would refer to the ng-model above --> 
       <div>Id: {{$model.Id}} </div> 
       <div>Title: {{ $model.Title }}</div> 
       ... 
      </div> 
     </div> 
    </div>

来源

2013-04-05 µBio

你能告诉我们初始数据的样子吗？无法直观显示'item'与'rows'有关。也许拼凑一块？ – jszobody 2013-04-05 16:00:30

@jszobody http://plnkr.co/edit/Bd5tYa7IxMb0ALtUigrz?p=preview – 2013-04-05 16:28:18

您可以创建一个带有transclud的指令，该指令将采用列表，行和列，并使transclud部分的范围内的项目。我知道淘汰赛有与类似的声明，但我不认为角度 – 2017-04-24 19:53:06

我认为要做到这一点的方式是简单地通过项目自身循环，沟所有numRows和numColumns。

http://plnkr.co/edit/Qu6X5FnZY3TpgyNjnBXy?p=preview

即输出正是你在做什么，有多少简单代码angularjs。

看来您正在使用行/列计数来限制您在一行中水平显示的项目数。我认为你可以用纯CSS来处理这个问题，你可以在我的plunk中看到我限制了父容器的宽度。我手动完成，但是你可以很容易地将一个动态的css类附加到父容器上，并且可以更灵活地控制一行中出现的项目数量。

来源

2013-04-05 16:52:57 jszobody

如果我想要部分固定宽度，但在这种情况下，我需要它的响应（我打算调整列数基于窗口尺寸，还没有到那个部分）。 – 2013-04-05 17:27:29

CSS可以更容易地调整到窗口尺寸。如果必须创建一些不同的CSS类名称，请将其应用于ng-class =“getRowClassNams（）”，并将所有宽度逻辑移至该位置。它仍然保持您的循环清洁。 – jszobody 2013-04-05 17:34:34

是的，css使它很容易...它已经在我的情况下（在代码中的行和span3类）bootstrap处理。我打算按照您的建议调整span3类，但如果我正确理解bootstrap，则需要响应行为的行类。 – 2013-04-05 18:52:37

你可能处理这个问题的一些方式，但它是值得一提，你不工作的例子是完全可能的，即使没有指令：

var app = angular.module('app',[]) 
 
app.controller('myCtrl', function($scope) { 
 
\t $scope.numColumns = 2 
 
\t $scope.rows = [1,2,3] 
 
\t $scope.cols = [1,2] 
 
\t $scope.data = [ 
 
\t \t {Id:'abc',Title:'cde'}, 
 
\t \t {Id:'qwe',Title:'rty'}, 
 
\t \t {Id:'asd',Title:'fgh'}, 
 
\t \t {Id:'foo',Title:'bar'}, 
 
\t \t {Id:'uni',Title:'corn'}, 
 
\t \t {Id:'mag',Title:'ic'}, 
 
\t ]; 
 
\t $scope.change1 = function(){ 
 
\t \t \t $scope.numColumns = 2 
 
\t \t $scope.rows = [1,2,3] 
 
\t \t $scope.cols = [1,2] 
 
\t } 
 
\t \t $scope.change2 = function(){ 
 
\t \t \t $scope.numColumns = 3 
 
\t \t $scope.rows = [1,2] 
 
\t \t $scope.cols = [1,2,3] 
 
\t } 
 
});

.span3 { 
 
\t display:inline-block; 
 
\t padding:5px; 
 
\t margin:5px; 
 
\t background: pink; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
<body ng-app="app"> 
 
\t <div ng-controller="myCtrl"> 
 
\t \t <button ng-click="change1()">2x3</button> 
 
\t \t \t \t <button ng-click="change2()">3x2</button> 
 

 
\t <div class="row" data-ng-repeat="row in rows"> 
 
     <div class="span3" data-ng-repeat="col in cols"> 
 
      <div> 
 
\t \t \t \t \t \t \t {{($model = data[$parent.$index * numColumns + $index])?'':''}} 
 

 
       <!-- Here $model would refer to the ng-model above --> 
 
       <div>Id: {{$model.Id}} </div> 
 
       <div>Title: {{ $model.Title }}</div> 
 
       ... 
 
      </div> 
 
     </div> 
 
    </div> 
 
\t </div> 
 
</body>

基本上，这是可能的在飞行中创建“$ model”等变量，内部表达式为：

{{($model = data[$parent.$index * numColumns + $index])?'':''}}

它不会打印它如果它会响应，在ng-repeat和所有内部工作。不过，这是一种解决方法，指令可能是更好的选择。

来源

2017-05-26 21:27:57

ng-repeat索引到数组

回答

相关问题