我有一个显示产品信息的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-show(或ng-hide)完成后,以较低的优先级遍历DIV。
<div class="enclosing" alternate-styles>
HTML from above
</div>
然而,有两件事困扰着我。第一,它能起作用吗。我总是对Angular中的某些内容感到惊讶。第二,我有一种挥之不去的怀疑,那就是我让我的jQuery经验让我对显而易见的Angular解决方案视而不见。
意见和/或建议?
谢谢,
Jerry
如果使用Angular 1.2,则可以使用ng-if
代替ng-show/ng-hide
从DOM中完全删除元素。
由于我是Angular的新手,所以制定指令对我来说有点挑战。我一直在与ng show在自定义指令后被解雇作斗争(一段时间后)。我确实找到了这个博客,它解释了为什么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')
}
});
});
}
};
}
]);
这是Plunker 的工作样本
我希望这能有所帮助。