网格布局对象

我真的不知道该怎么形容这一点，但基本上我渲染复选框的项目，但我不希望他们以列表格式。我也不会知道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。我知道有一种方法，但我不记得它是什么，或者如何称呼它为搜索笑

我也不想使用“插件”，因为我并不需要那么多的代码写又一范围对象，当我已经有范围的物体，或者在这方面，增加了冗长控制器，模块，指令或工厂，当这是一个很好的通用的“如果计数> = 3然后渲染砌筑/网格视图”

来源

2016-07-25 James Van Leuven

恕我直言，在引导你可以使用'COL-MD-4'）。 –

我知道对不对？我只是自己意识到这一点。我想我被编码今天太长笑 –

可以使用NG-重复此approach.If u有你在$ scope.array对象数组controller.For如。

$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>

请注意我米使用引导显示在连续3项

来源

2016-07-25 05:20:14 urvashi

哎，其实我只需要做 ''' 类=“COL-MD-3” ''' 我已经编码了15个小时了，只是忘了那个......我已经从范围中拉出来了，除此之外，我不使用partials cuz partials适用于无法编码的人 - 我正在使用document.createFragment并注入/编译元素，所以我没有把它写1000次:) 都好 - 我只是累了笑 –

试试这个，

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="[email protected]"></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>

来源

2016-07-25 05:21:23

哎我只需要写下类= COL-MD-3 我已经直接编码为15小时，忘记也我不使用partials。我注入/编译元素，所以我不需要多次写任何元素，它只是一个指令或服务注入调用。 html在21世纪是不必要的。代码可以为我写。 –

网格布局对象

回答

相关问题