Как хитрее взаимодействовать с массивом в контроллере (динамически)?

Question

[RodgerFox]

Всем привет, имею задачу создание сетки и изменения классов блоков в ней.
Имеем массив в контроллере:

$scope.gridList = [
  { 'row': [{
		"lg":"4",
		"md":"4",
		"sm":"6",
		"xs":"12"
  },{'row': {....}]
   }]

так храним инфу о размерах, есть некий блок (директива) изменяющая параметры {lg,md,sm,xs} и влиящая на выводящие элементы, все прекрасно, но как при изменении отображения (типа выводим классы col-md-* ), забирать из gridList опред. значение. Не представляю как это лучше всего сделать, подскажите как быть?
Переключается:
по ng-click, идем к шаблону правил, в нем идентификатор и префикс {lg,md,sm,xs}, именуем как classV

$scope.switchOp = function (idV, classV) {
  $scope.stilic.classView = classV; // заносим в спец блочек
// собираем нужный класс
$scope.menegerClass = 'col-'+classV+'-'+$scope[0].classV;
}

Конечно же $scope[0].classV; выдает ошибку, как к ней лучше обратиться, может как то фильтр суда засунуть? О_О
сами блоки можно менять по ширине, в данный момент:

$scope.plus = function(){
  if (this.item.lg >= 12) {return;}
       this.item.lg++;
};

, где .lg опять же будет заменено на выбранный префикс из директивы выше.

Логика в краце, существует список правил (название, ид, префикс) - дескоп, 1, lg. если активен он, то classV принимает значение - префикс, и в дальнейшем идет в правила построения ng-class, но как взять из другого массива с готовыми данными сетки значение выбранного префикса, что бы использовать его в ng-class, в фориче (при выводе всех элементов сетки, ng-repeat)

Или все это не правильно?

Может поможете вторым вариантом решение задачи:
структура вывода массива:

<section class="row" ng-repeat="list in gridList">
  <div data-ng-repeat="item in list.row">{{item.lg}}</div>
</section>

{{item.lg}} — выводит "4", какую функци создать, что бы она обращалась ко внутренним масивам и забирала lg, md в зависимости от переданной ей параметра

Answer 1

[RodgerFox]

решение:
добавляем ng-class="function(item) к нашим блокам, т.е. в
теперь с функцией, используем проверку

$scope.getClass = function(item) {
if (item.hasOwnProperty(cp)) {
	className = 'col-' + cp + '-' +item[cp];
}
return
}

, где 'cp' нужный префикс, и проверяем с массивом, выбираем от туда значение и используем.
Бррр... Хотя все равно плохо понимаю как лучше взаимодействовать с отдельными объектами в многомерных массивах, тут используется отдельный объект с набором префиксов и доп. свойств и вытягиваю правила из него, и сверяю с массивом сетки. Может кто видел не плохой пост о "глубинах" или что стоит почитать?
В данный момент изучаю ангуляр по предварительно поставленной задаче, реализовать то то и то то. Видел в сети сборники статей по созданию приложения, повышают скилл "пройтись" по ним?

Answer 2

[Mikhail Osher]

DEMO.

angular.module('toster', [])

.controller('GridCtrl', function() {
    var vm = this;
    
    var grids = [
        {
            xs: '12',
            sm: '6',
            md: '4',
            lg: '4'
        },
        {
            xs: '10',
            sm: '8',
            md: '6',
            lg: '3'
        }
    ];
    
    var activeIndex = 0;
    vm.activeGrid = grids[activeIndex];
    
    vm.toggleGrid = function() {
        switch (activeIndex) {
            case 0:
                vm.activeGrid = grids[++activeIndex];
                break;
            case 1:
                vm.activeGrid = grids[--activeIndex];
                break;
        }
    };
})

.directive('dynamicGrid', function() {
    return {
        scope: {
            grid: '=dynamicGrid'
        },
        templateUrl: 'dynamicGrid.html',
        link: function(scope, elem) {
            scope.$watch('grid', function(grid) {
                var gridCss = {};
                
                angular.forEach(grid, function(value, key) {
                    gridCss['col-' + key + '-' + value] = true;
                });
                
                scope.gridCss = gridCss;
            });
        }
    };
});

Comments

[RodgerFox]

Ой, спасибо, но это не то. Сначала забираем у всего массива, значение lg и показываем как сетка выглядит при варианте 1( large), при переключении префикс меняется и за ним цепляются другие значения из массива.
Хотя вижу у вас ворич в примере, попробую с ним. А такая конструкция не сильно влияет на производительность?
И возможно обращаться к опред (по порядку) параметру в под массиве? т.к. структура жесткая и все они друг за другом, брать типа gridList.row.[number] ??? предварительно вставляя number из доп. шаблона с переключением?

[RodgerFox]

Массив:
$scope.gridList = [
{
"row":[
{
"lg":"3",
"md":"3",
"sm":"4",
"xs":"8",
"content":"Logo33223"
},
{
"lg":"9",
"md":"9",
"sm":"8",
"xs":"10",
"content":"Nav",
"lg_offset":1
}]
},
{"row":[{уже другой роу с другими блоками в которых другие параметры},{...},{...}]}]
Всегда один, тут вся соль в том, какой из параметров используем (lg, md, sm, xs) для представления как выглядит сетка для разных устройств, если выбрали md, то из массива используем параметр md и его значение, с которым и играемся и меняем... это выглядит как то безумно (оперировать данными и играться с ними), но лучшего варианта я не знаю