Angularjs显示/隐藏和交替样式

我有一个显示产品信息的div列表。核心信息相同，但某些产品类型只显示或隐藏某些字段（通过ng-show/ng-hide）。这工作正常，但我们希望显示行交替样式（斑马条纹）为了可读性。如何做到这一点，因为如果我隐藏一行，我们最终会得到两行相同的样式？该HTML的格式为：Angularjs显示/隐藏和交替样式

<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解决方案感到盲目。

意见和/或建议？

感谢，

杰里

来源

2013-11-22 JerryKur

你可以使用ng-repeat和http://docs.angularjs.org/api/ng.directive:ngClassEven？ –

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

因为我是Angular的新手，所以让指令工作对我来说是一种挑战。我一直在用自定义指令（之后的一种方式）之后的ng-show触发全程战斗。我的确发现了这个blog，这解释了为什么ng-show具有我所遇到的行为。这是自定义指令和控制

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') 
      } 
      }); 
     }); 
     } 
    }; 
    } 
]);

这里的Java脚本代码段是工作sample on Plunker

我希望帮助。

来源

2013-11-25 00:31:31

谢谢。这正是我需要的。我理解的关键是关于检测隐藏的一点。 – JerryKur

如果您对角1.2，那么你可以使用ng-if代替ng-show/ng-hide从DOM中彻底删除元素。

来源

2013-11-22 18:24:44

Angularjs显示/隐藏和交替样式

回答

相关问题