Angularjs显示/隐藏和交替样式

Question

我有一个显示产品信息的div列表。核心信息是相同的，但是某些字段仅对特定产品类型显示或隐藏(通过ng-显示/ng-隐藏)。这很好，但为了可读性，我们希望以交替样式(斑马条纹)显示行。如何做到这一点，因为如果我隐藏一行，我们最终将有两行具有相同的样式？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显示(或ng-隐藏)完成后，使用较低的优先级遍历DIVs。

<div class="enclosing" alternate-styles>

       HTML from above

</div>

然而，有两件事困扰着我。第一，它能用吗。我总是对一些棱角分明的东西感到惊讶。第二，我有一个唠叨的怀疑，我是让我的jQuery经验使我盲目的明显的角度解决方案。

意见和/或建议？

谢谢,

曾傑瑞

Answer 1

制定工作指令对我来说是一种挑战，因为我是刚接触过棱角的。我一直在与ng显示射击后的自定义指令(一种方式后)。我确实找到了这个博客，这解释了为什么ng秀有我正在经历的行为。下面是用于自定义指令和控制器的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')
            }
          });
        });
      }
    };
  }
]);

这是工作的柱塞试样

我希望这能帮上忙。

Answer 2

如果您使用的是角度1.2，那么可以使用ng-if代替ng-show/ng-hide来从DOM中完全删除元素。