在AngularJS使用NG-表材料

Question

我想在我的材料设计使用此表angularjs应用：http://ng-table.com/#/

的问题是它需要引导。有两个CSS框架可能不是一个好主意。

是否有可能以某种方式提取ng-table所需的CSS并将其隔离为一个ID？所以它不会影响我的应用程序中的其他任何内容。

很伤心没有人为材质制作出体面的表格（md-table不够）。

Answer 1

当然可以。这里库所使用的CSS代码：

.ng-table th { 
    text-align: center; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none 
} 
.ng-table th.sortable { 
    cursor: pointer 
} 
.ng-table th.sortable .sort-indicator { 
    padding-right: 18px; 
    position: relative 
} 
.ng-table th.sortable .sort-indicator:after, 
.ng-table th.sortable .sort-indicator:before { 
    content: ""; 
    border-width: 0 4px 4px; 
    border-style: solid; 
    border-color: #000 transparent; 
    visibility: visible; 
    right: 5px; 
    top: 50%; 
    position: absolute; 
    opacity: .3; 
    margin-top: -4px 
} 
.ng-table th.sortable .sort-indicator:before { 
    margin-top: 2px; 
    border-bottom: none; 
    border-left: 4px solid transparent; 
    border-right: 4px solid transparent; 
    border-top: 4px solid #000 
} 
.ng-table th.sortable .sort-indicator:hover:after, 
.ng-table th.sortable .sort-indicator:hover:before { 
    opacity: 1; 
    visibility: visible 
} 
.ng-table th.sortable.sort-asc, 
.ng-table th.sortable.sort-desc { 
    background-color: rgba(141, 192, 219, .25); 
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .75) 
} 
.ng-table th.sortable.sort-asc .sort-indicator:after, 
.ng-table th.sortable.sort-desc .sort-indicator:after { 
    margin-top: -2px 
} 
.ng-table th.sortable.sort-asc .sort-indicator:before, 
.ng-table th.sortable.sort-desc .sort-indicator:before { 
    visibility: hidden 
} 
.ng-table th.sortable.sort-asc .sort-indicator:after, 
.ng-table th.sortable.sort-asc .sort-indicator:hover:after, 
.ng-table th.sortable.sort-desc .sort-indicator:after { 
    visibility: visible; 
    filter: alpha(opacity=60); 
    -khtml-opacity: .6; 
    -moz-opacity: .6; 
    opacity: .6 
} 
.ng-table th.sortable.sort-desc .sort-indicator:after { 
    border-bottom: none; 
    border-left: 4px solid transparent; 
    border-right: 4px solid transparent; 
    border-top: 4px solid #000; 
    box-shadow: none 
} 
.ng-table th.filter .input-filter { 
    margin: 0; 
    display: block; 
    width: 100%; 
    min-height: 30px; 
    box-sizing: border-box 
} 
.ng-table .ng-table-group-header th { 
    text-align: left 
} 
.ng-table .ng-table-group-selector { 
    display: block 
} 
.ng-table .ng-table-group-close, 
.ng-table .ng-table-group-toggle { 
    float: right 
} 
.ng-table .ng-table-group-toggle { 
    margin-right: 5px 
} 
@media only screen and (max-width: 800px) { 
    .ng-table-responsive { 
     border-bottom: 1px solid #999 
    } 
    .ng-table-responsive tr { 
     border-top: 1px solid #999; 
     border-left: 1px solid #999; 
     border-right: 1px solid #999 
    } 
    .ng-table-responsive td:before { 
     position: absolute; 
     padding: 8px; 
     left: 0; 
     top: 0; 
     width: 50%; 
     white-space: nowrap; 
     text-align: left; 
     font-weight: 700 
    } 
    .ng-table-responsive thead tr th { 
     text-align: left 
    } 
    .ng-table-responsive thead tr.ng-table-filters th { 
     padding: 0 
    } 
    .ng-table-responsive thead tr.ng-table-filters th form>div { 
     padding: 8px 
    } 
    .ng-table-responsive td { 
     border: none; 
     border-bottom: 1px solid #eee; 
     position: relative; 
     padding-left: 50%; 
     white-space: normal; 
     text-align: left 
    } 
    .ng-table-responsive td:before { 
     content: attr(data-title-text) 
    } 
    .ng-table-responsive, 
    .ng-table-responsive tbody, 
    .ng-table-responsive td, 
    .ng-table-responsive th, 
    .ng-table-responsive thead, 
    .ng-table-responsive tr { 
     display: block 
    } 
} 
.ng-table-pagination { 
    margin-top: 0 
} 
.filter:after, 
.filter:before, 
.ng-table-group-selector:after, 
.ng-table-group-selector:before { 
    display: table; 
    content: " " 
} 
.filter:after, 
.ng-table-group-selector:after { 
    clear: both 
} 
.filter>.filter-cell { 
    float: left; 
    box-sizing: border-box 
} 
.filter-horizontal>.filter-cell { 
    padding: 0 2px 
} 
.filter-horizontal>.filter-cell:first-child { 
    padding-left: 0 
} 
.filter-horizontal>.filter-cell.last, 
.filter-horizontal>.filter-cell:last-child { 
    padding-right: 0 
} 
.s12 { 
    width: 100% 
} 
.s11 { 
    width: 91.66666666666666% 
} 
.s10 { 
    width: 83.33333333333334% 
} 
.s9 { 
    width: 75% 
} 
.s8 { 
    width: 66.66666666666666% 
} 
.s7 { 
    width: 58.333333333333336% 
} 
.s6 { 
    width: 50% 
} 
.s5 { 
    width: 41.66666666666667% 
} 
.s4 { 
    width: 33.33333333333333% 
} 
.s3 { 
    width: 25% 
} 
.s2 { 
    width: 16.666666666666664% 
} 
.s1 { 
    width: 8.333333333333332% 
} 
@media all and (max-width: 468px) { 
    .s1, 
    .s2, 
    .s3, 
    .s4, 
    .s5, 
    .s6, 
    .s7, 
    .s8, 
    .s9, 
    .s10, 
    .s11, 
    .s12 { 
     width: 100% 
    } 
    .filter>.filter-cell { 
     padding: 0 
    } 
} 

将一个自定义的类时，你有你的表中的HTML（例如像：my-ng-table）和查找和替换的CSS代码中的.ng-table所有出现以上my-ng-table。

然后在那里你看到.s1.s2等代码的所有块，改造他们在my-ng-table .s1等等等等（为了保证这会影响你的表内唯一的类。

您可能需要在包同样的方法也类filter，但我不认为如果你离开它以这种方式会造成任何冲突。

它应该只是工作为您的表不发生任何冲突。

我希望它能帮助