用LESS創建表格樣式

這個問題是關於在AngularJS指令中創建的表格的樣式。我有一個從HTML文件傳遞給指令的對象數組。該指令創建一個表並在一行中顯示該數組的每個對象。用LESS創建表格樣式

現在我的問題：還有就是每個對象自定義的JSON場稱爲名。造型由LESS技術完成，我希望在每行後面有一條厚的分隔線，當'name == david'。請考慮這個條件可以是不同的，例如'rowID％3 == 0'等等。我的一般問題是我如何在LESS文件中訪問這些對象，以及如何在LESS中創建條件樣式。

來源

2017-04-07 Danial

我做了很多假設，因爲您沒有包含任何代碼或標記，但是在Angular中，這是一個非常基本的簡單問題，並且與您使用的是LESS，Sass還是純粹無關CSS：

<table> 
    <thead> 
    <tr> 
     <th>Col 1</th> 
     <th>Col 2</th> 
     <th>Col 3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="item in vm.items track by $index" ng-class="{'thick-separator': isNameDavid(item) || $index%3 == 0}"> 
     <td>{{item.propOne}}</td> 
     <td>{{item.propTwo}}</td> 
     <td>{{item.propThree}}</td> 
    </tr> 
    </tbody> 
</table>

在你的控制器：

$scope.isNameDavid = function(item) { 
    return item.name == 'david'; 
};

使用ngClass指令和由ngRepeat directive引入的$index範圍的變量，你可以輕鬆地thick-separator類分配到錶行，有條件的。現在

，這都沒有區別，如果你正在使用更少的，無禮的話，或純CSS：

.thick-seperator { 
    border-top: 5px solid black; 
}

然而，如果你想說，你不能改變的角碼，你需要爲了能夠純粹使用LESS，那麼您可以使用屬性和nth-child選擇器進行樣式設置。請注意，這些是可用的純CSS和LESS不需要：

table tbody tr:nth-child(3n+3), table tbody tr[data-name="david"] { 
    border-top: 5px solid black; 
}

來源

2017-04-07 16:15:02

親愛的喬爾，第一種方法，有條件的ng類是我正在尋找。但是，它不起作用，因爲item.name =='david'的評估沒有執行。我試着跟着，它的工作原理是：ng-class =「{'thick-separator'：true}，它將LESS類添加到所有行中，但是當我添加條件而不是true時，它根本不會被評估。認爲語法是一個問題的地方？ – Danial

是的，這裏有一個語法問題引用，實際上，使用控制器方法會更好，所以不要使用'item.name =='david''，你可以編寫'isNameDavid（item ）'並且在你的控制器中，你可以定義'$ scope.isNameDavid = function（item）{return item.name =='david';}' –

完美，這個想法工作得很好，將參數放入作用域函數並在那裏作出決定。感謝百萬Joel。 – Danial

用LESS創建表格樣式

回答

相關問題