2014-04-30 2 views
0

우리는 현재 데이터를 그리드에 표시하기 위해 ng-grid을 사용하고 있습니다. 그러나 지금 우리가해야 할 일은 각 행에 대한 메뉴를 만드는 것입니다.ng-grid embeded 메뉴가 숨겨져 있습니다

정상적인 테이블에있는 쉬운 작업입니다. 그러나 ng-grid을 사용하면 실제 메뉴가 표시되지 않으므로 문제가 발생합니다. 즉

, 그것은 세포 내에서 메뉴를 배치, 그리고 그 표시 될 때 오버 플로우가 셀에 숨겨져 정도로, 우리는 (의미가 희망) 메뉴의 일부

을 볼 수 있습니다 우리 이 단순화에서

$scope.gridOptions = { 
    data: 'myData', 
    columnDefs: [{ 
     field: 'name', 
     displayName: 'Name' 
     }, 
     { 
     field: 'age', 
     displayName: 'Age', 
     cellTemplate: '<div ng-mouseover="showmenu=true" ng-mouseleave="showmenu=false" class="ngCellText">{{row.getProperty(col.field)}}' + 
      '<span class="hmenu" ng-show="showmenu" ng-click=sayHello(row.entity.name)><button>click me</button></span>' + 
      '</div>' 
     } 
    ] 
    }; 

봐 :이 같은 세포 템플릿을 사용할 수 http://jsfiddle.net/akA6H/39/

var myApp = angular.module('myApp', ['ui.bootstrap']); 

function MyCtrl($scope) { 
    $scope.name = 'Superhero'; 
} 

myApp.directive('showOnRowHover', 

function() { 
    return { 
     link: function (scope, element, attrs) { 
     element.closest('tr').bind('mouseenter', function() { 
      element.show(); 
     }); 
     element.closest('tr').bind('mouseleave', function() { 
      element.hide(); 

      var contextmenu = element.find('#contextmenu'); 
      contextmenu.click(); 

      element.parent().removeClass('open'); 
     }); 
    } 
    }; 
}) 

답변

0

: 이런 식으로 뭔가를 달성하기 위해 노력하고있다 75,377,

UPDATE : 어, 내가 잊었 : 당신이 행 호버에이를 원한다면, 당신은 너무 행 템플릿을 정의하고이 스위치를 넣고 $ 부모에 값을 적용해야합니다.

Updated Plunker here

+0

$scope.gridOptions = { data: 'myData', rowTemplate: '<div ng-mouseover="$parent.showmenu=true" ng-mouseleave="$parent.showmenu=false" ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex() }" ' + 'ng-repeat="col in renderedColumns" ng-class="col.colIndex()" ' + 'class="ngCell {{col.cellClass}}" ng-cell></div>', columnDefs: [{ field: 'name', displayName: 'Name' }, { field: 'age', displayName: 'Age', cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field)}}' + '<span class="hmenu" ng-show="showmenu" ng-click=sayHello(row.entity.name)><button>click me</button></span>' + '</div>' }] }; 
정말 우리가 후 무엇인지. 기본적으로 각 행에 대해 메뉴가 표시됩니다. 즉, 각 행에 버튼이있어서 사용자가 클릭 할 때 세부 정보보기, 세부 정보 수정, 세부 정보 삭제 등과 같은 추가 옵션이 제공됩니다. – Simon