css - Angular.js显示/隐藏和交替样式

我有一个显示产品信息的div列表。核心信息相同，但某些字段只显示或隐藏（通过ng show/ng hide）特定产品类型。这很好，但为了可读性，我们希望以交替样式（斑马线）显示行。如果我隐藏一行，我们将以两行相同的样式结束，怎么能这样做呢？HTML的格式如下：

    <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我们用“alt-1”样式的两个相邻行结束。
我的一个想法是编写一个指令（在下面的示例中使用替代样式），在ng show（或ng hide）完成后优先遍历div。

<div class="enclosing" alternate-styles>

       HTML from above

</div>

然而，有两件事困扰着我。第一，它能用吗？我总是对有棱角的东西感到惊讶。第二，我一直怀疑我是在让jquery的经验蒙蔽我，让我看不到明显的角度解。
意见和/或建议？
谢谢，
杰瑞

最佳答案

对我来说，做工作指令是一种挑战，因为我是新来的角度。我一直在与ng秀战斗，在定制指令（一种方式之后）后开火。
我确实发现了这个blog，这解释了为什么ng show有我所经历的行为。
下面是自定义指令和控制器的Java脚本片段

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
我希望这会有帮助。