Angularjs 显示/隐藏和交替样式

Posted 2023-03-06

【中文标题】Angularjs 显示/隐藏和交替样式

【英文标题】：Angularjs show/hide and alternating styles

【发布时间】：2013-12-07 16:24:02

【问题描述】：

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

但是，有两件事困扰着我。一，行不通。我总是对 Angular 中的某些东西感到惊讶。第二，我有一种挥之不去的怀疑，即我让我的 jQuery 经验让我对明显的 Angular 解决方案视而不见。

意见和/或建议？

谢谢，

杰瑞

【问题讨论】：

你能使用 ng-repeat 和docs.angularjs.org/api/ng.directive:ngClassEven吗？

我想过，但是我必须创建大量字段和提示，然后动态填写表单的每个部分。这是一种选择，但我不喜欢使用它，因为它与应用程序中的所有其他布局不同。

【参考方案1】：

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

【参考方案2】：

因为我是 Angular 新手，所以让指令生效对我来说有点挑战。在自定义指令之后（之后），我一直在与 ng-show 战斗。 我确实找到了这个blog，这解释了为什么 ng-show 有我遇到的行为。 这是自定义指令和控制器的java脚本sn-p

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

希望对你有帮助。

【讨论】：

谢谢。这正是我所需要的。我理解的关键是检测 ng-hide。