Angularjs показать/скрыть и чередующиеся стили

У меня есть список разделов, отображающих информацию о продуктах. Основная информация одинаков, но определенные поля отображаются или скрыты (через ng-show/ng-hide) для определенного типа продукта. Это прекрасно работает, но мы хотим показать строки в чередующихся стилях (полосы зебры) для удобочитаемости. Как это можно сделать, поскольку, если я скрою одну строку, мы получим две строки с одинаковым стилем? HTML имеет вид:Angularjs показать/скрыть и чередующиеся стили

<div style="alt-1"> 
     <div class="col-md-3 list-item-odd">Location</div> 
     <div class="col-md-9 list-item-odd" >{{ location }}</div> 
    </div> 

    <div ng-show="itemType == 1" style="alt-2"> 
     <div class="col-md-3 list-item-odd">Layout Type</div> 
     <div class="col-md-9 list-item-odd" >{{ layoutType}}</div> 
    </div> 

    <div style="alt-1"> 
     <div class="col-md-3 list-item-odd">Category</div> 
     <div class="col-md-9 list-item-odd" >{{ category }}</div> 
    </div>

В этом примере показывают, если ItemType = 1 мы заканчиваем вас с двумя смежными рядами со стилем «альт-1»!.

Одна из моих идей заключалась в том, чтобы написать директиву (альтернативные стили в примере ниже) с более низким приоритетом, чтобы пройти DIV после завершения ng-show (или ng-hide).

<div class="enclosing" alternate-styles> 

     HTML from above 

</div>

Однако, есть две вещи, которые меня беспокоят. Один, это сработает. Я всегда удивляюсь чему-то в Угловом. Во-вторых, у меня есть это подозрительное подозрение, что я даю возможность jQuery ослепить меня до очевидного решения с угловыми углами.

Мнения и/или предложения?

Спасибо,

Jerry

источник

2013-11-22 JerryKur

Не могли бы вы использовать ng-repeat и http://docs.angularjs.org/api/ng.directive:ngClassEven? –

Я думал об этом, но тогда мне пришлось бы создавать большой массив полей и подсказок, а затем заполнять каждый раздел формы динамически. Это вариант, но не тот, который я предпочитаю использовать, поскольку он отличается от всех других макетов в приложении. – JerryKur

Создание директивы для работы было чем-то сложным для меня, так как я новичок в Angular. Я боролся все время с запуском ng-show после пользовательской директивы (путь после). Я нашел это blog, в котором объясняется, почему у ng-show есть поведение, которое я испытывал. Вот ява скрипт сниппет для пользовательской директивы и контроллер

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 

    $scope.location = 'location here'; 
    $scope.layoutType = 'layoutType here'; 
    $scope.category = "category here" 
    $scope.itemType = 2; 
    $scope.alternateStyle = 0; 
}); 
app.directive("alternateStyle", ['$timeout', 
    function($timeout) { 

    return { 
     restrict: 'A', 

     link: function(scope, element, attrs) { 
     scope.$watch('itemType', function(newVal) { 
      $timeout(function() { 
      if (!element.hasClass('ng-hide')) 
       scope.alternateStyle++; 
      if (scope.alternateStyle % 2) { 
       element.removeClass('alt-1').addClass('alt-2') 
      } else { 
       element.removeClass('alt-2').addClass('alt-1') 
      } 
      }); 
     }); 
     } 
    }; 
    } 
]);

и вот рабочий sample on Plunker

Я надеюсь, что помогает.

источник

2013-11-25 00:31:31

Спасибо. Это то, что мне нужно. Ключом к моему пониманию был бит об обнаружении ng-hide. – JerryKur

Если вы на угловых 1.2, то вы можете использовать ng-if вместо ng-show/ng-hide, чтобы полностью удалить элемент из DOM.

источник

2013-11-22 18:24:44

Angularjs показать/скрыть и чередующиеся стили

ответ

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