在多列中显示来自 ng-repeat 的数据答案

【问题标题】：Display data from ng-repeat in multiple columns在多列中显示来自 ng-repeat 的数据
【发布时间】：2016-08-04 20:23:32
【问题描述】：

我正在使用 ng-repeat 从 Db 获取数据列表到视图。为了一次选择多个值，我使用了清单模型。我的代码如下，

<div ng-repeat="item in items">
<input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
</div>

这将返回一个长列表，一个在另一个之下。我需要的是让列表中的这些数据显示在 4 列中。请帮忙！

这是我之前的问题。对于这个问题的答案，我得到了这个

<table>
   <tr>
      <td ng-repeat="item in items">
          <input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
      </td>
   </tr>
</table>

还有这个

<div ng-repeat="item in items" style="display:inline-block;">
  <input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
</div>

这些代码可确保数据位于同一行。但我想要的是将值添加到 4 个单独的列中。如果有 1000 个数据，我需要 200 个数据在一列中，200 个在第二列中，依此类推。请不要说我正在使用清单模型

【问题讨论】：

标签： angularjs checklist-model

【解决方案1】：

嗨，请试试这个并使用逻辑

  var app = angular.module("app",[]);
    
    app.controller("MyCtrl" , function($scope){
      
      $scope.index = 0;
       $scope.items =["str1", "str2", "str3","str4","str5","str6","str7","str8","str9","str10"];
       $scope.array = [];
      for(var i=0; i<$scope.items.length/5;i++)
        $scope.array.push(i);
      });

<html>
      <head>
        <title>My Angular App!</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
       
      </head>
      
      <body>
    	
    	
    	
    	<div ng-app="app" ng-controller="MyCtrl">
       
      <table>
        <tr>
          <td>Col1</td>
          <td>Col2</td>
          <td>Col3</td>
          <td>Col4</td>
    	  <td>Col5</td>
          </tr>
         <tr ng-repeat="i in array"  ng-init="index = i*5">
           
             <td ng-repeat="one in items.slice(index,index+5)">{{one}}</td>
         </tr>
     </table>
      
    </div>
    
    	
    	
      </body>
      
      
    </html>

【讨论】：

@tharindusenanayake 您好，使用此登录名并添加您的自定义设置，将“5”替换为“4”
谢谢@NikhilVaghela。我尝试过这个。但问题是我传递的数据是一个 $scope 对象。当我使用它时，它不起作用。对于它的数组。有没有办法让我将该 $scope 对象转换为数组？
请做完整的演示然后我可能会有所帮助
我正在使用 get 方法从 web api 接收数据。具有 ID 和 Name 的值属性。这是我正在使用的方法var pramiseGet = angularService.GetProducts(); pramiseGet.then(function (pl) { $scope.Products = pl.data; console.log($scope.Products); }
将项目替换为产品，需要更多帮助需要演示此演示在您的本地尝试并根据您的要求进行修改

【解决方案2】：

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index]}}</div>
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index+1]}}</div>
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index+2]}}</div>
</div>

这成功了。感谢@KhalidHussain

【讨论】：

这不会导致每列的清单值相同吗？ IMO这种方法是一个陷阱，因为每列的“产品”不是“产品”，甚至在编写它时欺骗了这个答案的作者......更不用说清单html的重复了。
您还需要检查'products[$index+1]'或'products[$index+2]'是否存在。