Question

我真的不知道如何描述这个，但基本上我是渲染复选框项目，但我不希望它们以列表格式。我也不知道JSON对象数组中可能存在多少个元素。

我可以轻松创建一个列表，例如：

item.value1
item.value2
item.value3
etc

但我可以在JSON对象中有3或300个项目，所以这很愚蠢。

我想做的是

item.value1 | item.value2 | item.value3
item.value4 | item.value5 | item.value6
etc

无需知道数组中有多少个对象。数组看起来像：

[
  {
     id: 1,
     value: column1
  },
  {
     id: 2,
     value: column2
  },
  // etc
];

html只会是：

<label data-ng-bind="item.value1"></label> <input type="checkbox" data-ng-bind="item.id1" />
<label data-ng-bind="item.value2"></label> <input type="checkbox" data-ng-bind="item.id2" />
<label data-ng-bind="item.value3"></label> <input type="checkbox" data-ng-bind="item.id3" />

我想在通用JavaScript中执行此操作。我知道有一种方法，但我不记得它是什么，或者用什么来称它来搜索lol

我也不想使用“插件”，因为当我已经拥有范围对象时，我不需要那么多代码来编写另一个范围对象，或者就此而言，添加一个详细的控制器，模块，指令或工厂，当这是一个很好的通用'if count＆gt; = 3然后渲染砌体/网格视图'

Answer 1

你可以使用ng-repeat来实现这种方法。如果你在控制器上的$ scope.array对象中有你的数组。例如。

 $scope.array=[
  {
     id: 1,
     value: column1
  },
  {
     id: 2,
     value: column2
  },
  // etc
];

您的观看代码 -

<div ng-repeat="item in array">
<div class="col-lg-4"><label data-ng-bind="item.value"></label></div>
<div class="col-lg-4"><label data-ng-bind="item.value"></label></div>
<div class="col-lg-4"><label data-ng-bind="item.value"></label></div>
</div>

请注意我使用bootstrap连续显示3个项目

Answer 2

试试这个，

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [
  {
     id: 1,
     value: 'column1'
  },
  {
     id: 2,
     value: 'column2'
  },
 {
     id: 3,
     value: 'column3'
  },
  {
     id: 4,
     value: 'column4'
  },
   {
     id: 1,
     value: 'column5'
  },
  {
     id: 2,
     value: 'column6'
  },
 {
     id: 3,
     value: 'column7'
  },
  {
     id: 4,
     value: 'column8'
  },
];
});

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="MainCtrl">
   <div ng-repeat="item in items" ng-switch on="$index % 3">
     <div style="float:left">
        {{item.value}}
     </div>
    
     <div ng-switch-when="2"><br></div>
   </div>
  </body>

</html>

来自JSON对象数组的网格布局

2 个答案: