Question

我有一个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解决方案视而不见。

意见和/或建议？

谢谢，

杰里

Answer 1

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

Answer 2

让我的指令工作对我来说是一种挑战，因为我是Angular的新手。在自定义指令（后面的方法）之后，我一直在使用ng-show解雇。我找到了这个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

我希望有所帮助。

Angularjs显示/隐藏和交替样式

2 个答案: