2016-07-25 4 views
0

Я не знаю, как это описать, но в основном я передаю элементы флажка, но я не хочу, чтобы они были в формате списка. Я также не знаю, сколько элементов может существовать в массиве объектов JSON.Схема сетки из массива объектов JSON

Я могу легко создать список таких как:

item.value1 
item.value2 
item.value3 
etc 

, но я мог бы иметь 3 или 300 элементов в объекте JSON, так что это глупо.

То, что я хотел бы сделать, это

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

Я также не хочу использовать «плагин», потому что мне не нужен такой код напишите еще один объект области видимости, когда у меня уже есть объекты области видимости или, если на то пошло, добавление подробного контроллера, модуля, директивы или фабрики, когда это хороший общий «если count> = 3», то визуализируйте каменную/сетчатую структуру «

+0

ИМХО, в загрузчике можно использовать 'COL-MD-4';). –

+0

Я правильно знаю? Я сам это понял. Я думаю, что я кодирования слишком долго сегодня лол –

ответ

0

Вы можете использовать ng-repeat для этого подхода. Если у вашего массива есть объект $ scope.array на контроллере. Например.

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

Ваше мнение code-

<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 элементов в строке

+0

эй, на самом деле я только нужно сделать '' ' класс =«Col-мкр-3» ' '' Я был кодирования в течение 15 часов подряд и просто забыл об этом ... Я уже вытаскивал его из области действия, и кроме того, я не использую частичные частицы, потому что частичные для людей, которые не могут кодировать - я использую document.createFragment и впрыскивание/компиляцию элемента, поэтому Я не должен писать в 1000 раз :) все хорошо - я просто устал лол –

0

Попробуйте это,

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>

+0

эй я нужен только для написал класс = кол-мкр-3 я был кодирования в течение 15 часов подряд и забыл также я не использую частичные.Я добавляю/компилирую элементы, поэтому мне не нужно когда-либо писать какой-либо элемент более одного раза, и это не что иное, как директива или вызов службы инъекции. html не нужен в 21 веке. Код может написать для меня. –

Смежные вопросы