Geek Answers Handbook

Angularjs show / hide and alternate styles

I have a list of sections displaying product information. The basic information is the same, but certain fields are displayed or hidden (via ng-show / ng-hide) for a specific type of product. This works great, but we want to show strings in alternating styles (zebra stripes) for readability. How can this be done, because if I hide one line, we get two lines with the same style? HTML has the form:

    <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>

As shown in this example, if itemType! = 1, we end with two adjacent lines with the style "alt-1".

One of my ideas was to write a directive (alternative styles in the example below) with a lower priority in order to go through the DIV after ng-show (or ng-hide) completes.

<div class="enclosing" alternate-styles>

       HTML from above

</div>

. , . - Angular. -, , jQuery Angular.

/ ?

,

+4
2

- , Angular. ng-show ( ). , , ng-show , . java script

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

, .

+2

Angular 1.2, ng-if ng-show/ng-hide, DOM.

+3

More articles:


All Articles