Angularjs 스타일 표시/숨기기 및 바꾸기

제품 관련 정보를 표시하는 div 목록이 있습니다. 핵심 정보는 동일하지만 특정 제품 유형에 대해 특정 필드 만 표시되거나 숨겨집니다 (ng-show/ng-hide를 통해). 이것은 정상적으로 작동하지만 가독성을 위해 행을 교대로 표시합니다 (얼룩말 줄무늬). 어떻게하면 하나의 행을 숨기면 같은 스타일의 두 행이 나올 것이기 때문에 어떻게 할 수 있습니까? html로 양식입니다! 우리는 스타일 "ALT-1"두 개의 인접한 행 당신을 끝낼 경우 나타내고 itemtype = 1이 예 쇼로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>

내가 가진 한 가지 생각은 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') 
      } 
      }); 
     }); 
     } 
    }; 
    } 
]);

와의 자바 스크립트 코드 조각이다 나는 희망이 도움이 작업 sample on Plunker

입니다.

출처

2013-11-25 00:31:31

감사합니다. 이것은 내가 필요한 것입니다. 나의 이해에 열쇠는 ng-hide를 검출하는 것에 관하여 조금이었다. – JerryKur

당신이 각도 1.2에있는 경우, 당신은 완전히 DOM에서 요소를 제거하기 위해 ng-show/ng-hide 대신에 ng-if를 사용할 수 있습니다.

출처

2013-11-22 18:24:44

Angularjs 스타일 표시/숨기기 및 바꾸기

답변

관련 문제