0

angularjs에 테이블 페이지 매김 지시문을 만들고 페이지 번호를 표시하기 위해 부트 스트랩 버튼을 사용하고 있습니다. 이 지시어를 작업용으로 만들고 여러 개의 응용 프로그램과 함께 사용하기 때문에 사용자 정의 할 수있게 만들었습니다. 따라서 내 버튼에있는 모든 클래스는 내 범위의 변수에 바인딩됩니다 (기본적으로 사용자는 각 버튼에 대해 고유 한 클래스를 정의 할 수 있습니다). 내 문제는 버튼에 대한 클래스를 정의 할 수 있기 때문에 현재 페이지 번호의 클래스에 구체적인 색상을 설정할 수 없다는 것입니다. 예를 들어 페이지 3을 클릭하면 페이지 3이 변경되어 페이지가 어느 페이지에 있는지 알 수 있습니다. 각 부트 스트랩 버튼 위로 마우스를 가져갈 때 사용되는 색상은 완벽하게 작동하지만 마우스로 가리킬 때만 적용됩니다. 사용자가 선택한 부트 스트랩 클래스의 호버 속성을 표시하도록 현재 페이지 번호를 강제하는 방법이 있습니까? 여기요소에 강제로 호버 효과를 표시 할 수 있습니까?

내가합니다 (paginatedTable.html에서) 호버 클래스를 적용하는 겨-클래스를 사용하고자하는 곳이다 : 여기

<button title="Page {{pageNumber}}" type="button" class="{{cndBtnNumbersClass}}" ng-repeat="pageNumber in cndPageNumbers" 
     ng-click="cndTablePaginationNav(pageNumber)">{{pageNumber}}</button> 

는 작업 plnkr입니다. 페이지 번호 중 하나를 클릭하면 스타일이 적용되는 동안 스타일이 적용되지만 클릭을 해제하면 더 이상 선택되는 페이지 번호가 표시되지 않습니다. http://plnkr.co/edit/CHO6HbT4emM3VEwcNnzq?p=preview

는 사전에 어떤 도움을 주셔서 감사합니다!

+0

클릭 한 항목에 새 클래스를 설정하고 이전 클래스를 지우는 추가 호출을 ng-click에 추가 할 수 있습니다. 몇 줄의 jquery 줄이 있어야한다. – Scott

답변

2

아니요,하지만 위조 할 수 있습니다.

.something:hover, .something.hover { 
    ...some style ... 
} 

그런 다음 바로 hover CSS 클래스를 전환하고 공중 선회 것처럼 CSS 동작합니다.

+0

나는이 해결책을 두 번 본 적이 있으며, 유일한 해결책일지도 모른다. 어떤 요소라도 사용할 수있는 일반적인 방법이있을 것으로 기대하고 있었고 부트 스트랩의 코드를 자신의 CSS 클래스에 다시 복사 할 필요가 없게 되더라도 피할 수 없다고 생각하지 않습니다. 답변 주셔서 감사합니다! –

관련 문제