Css Angularjs显示/隐藏和交替样式

我有一个显示产品信息的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>

位置
{{location}}
布局类型
{{layoutType}}
类别
{{category}}

如本例所示，如果itemType！=1我们以样式为“alt-1”的两行相邻行结束

我的一个想法是在ng show（或ng hide）完成后，编写一个优先级较低的指令（下面示例中的替代样式）来遍历div

<div class="enclosing" alternate-styles>

       HTML from above

</div>

上面的HTML

然而，有两件事困扰着我。第一，它会起作用。我总是对一些有棱角的东西感到惊讶。第二，我有一种烦人的怀疑，就是我让我的jQuery经验使我看不到明显的角度解决方案

意见和/或建议

谢谢

---

Jerry

如果您使用的是Angular 1.2，那么您可以使用来代替

ng show/ng hide

从DOM中完全删除元素。

由于我是Angular新手，因此使指令生效对我来说是一种挑战。我一直在与ng show在定制指令之后开火（一种方式之后）进行斗争。 我确实发现了这一点，这解释了为什么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')
            }
          });
        });
      }
    };
  }
]);

这是工作时间

---

我希望这会有所帮助。

你能利用ng repeat和吗？我考虑过了，但是我必须创建一个大的字段和提示数组，然后动态填充表单的每个部分。这是一个选项，但不是我喜欢使用的，因为它不同于应用程序中的所有其他布局。谢谢。这正是我需要的。我理解的关键是关于检测隐藏的部分。