Ang-ng-repeat和Sass衝突

我現在正在一個項目上工作。可悲的是我被困在以下問題：Ang-ng-repeat和Sass衝突

我正在使用ng-repeat來填充列表，它形成了導航欄和Sass來根據元素的數量調整列表元素的寬度，因此寬度平均分佈。

它看起來像這樣：

HTML

<div class="leftViewNav" class="leftNav"> 
    <div> 
     <ul> 
      <li ng-repeat= "leftNavTag in leftNavTags"><p>{{ leftNavTag.title }}</p></li> 
      <li><p>add</p></li> 
     </ul> 
    </div> 
    </div>

SCSS

li{ 
    position: relative; 
    @for $i from 1 through 4 { 
     li:first-child:nth-last-child(#{$i}), 
     li:first-child:nth-last-child(#{$i}) ~ li { 
      width: 100%/$i 
     } } 
    height: 5%; 
}

角

$scope.leftNavTags = 
[ 
    { 
     title: 'Analysis', 
    }, 
    { 
     title: 'Log', 
    }, 
    { 
     title: 'Edit', 
    } 
];

CSS

.leftBound div ul li { 
    position: relative; 
    height: 5%; 
    float: left; 
    background-color: #C4C2C3; 
    border-right: 1px solid #000; 
    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease; 
} 
/* line 50, ../sass/main.scss */ 
.leftBound div ul li li:first-child:nth-last-child(1), 
.leftBound div ul li li:first-child:nth-last-child(1) ~ li { 
    width: 100%; 
} 
/* line 50, ../sass/main.scss */ 
.leftBound div ul li li:first-child:nth-last-child(2), 
.leftBound div ul li li:first-child:nth-last-child(2) ~ li { 
    width: 50%; 
} 
/* line 50, ../sass/main.scss */ 
.leftBound div ul li li:first-child:nth-last-child(3), 
.leftBound div ul li li:first-child:nth-last-child(3) ~ li { 
    width: 33.33333%; 
} 
/* line 50, ../sass/main.scss */ 
.leftBound div ul li li:first-child:nth-last-child(4), 
.leftBound div ul li li:first-child:nth-last-child(4) ~ li { 
    width: 25%; 
}

因此，第一個元件具有100％的寬度，所述第二50％等。

如何解決這個問題，使元素具有相同的寬度？幫助很多.appreciated。

編輯：澄清了這個問題。：

來源

2015-10-18 CTSK

不使用：第一個孩子，在CSS中的第n個最後孩子，使用適當的類。並且在角度上你可以在ng-repeat中使用$ first，$ last，$ middle，$ even，$ odd，這樣你就可以使用ng-class – YOU

@CTSK，你不知道你想達到什麼，元素會減少寬度或具有相同寬度的元素？我不能檢查對這個問題的未決編輯，只要它不清楚OP需要什麼 – GameDeveloper

這裏不清楚實際問題是什麼。這與Sass，Angular或JavaScript無關：這是一個純粹的CSS問題。您的標記/ CSS如何生成是不相關的。 – cimmanon

問題1：

在模板中，你有兩個class屬性：

<div class="leftViewNav" class="leftNav">

問題2：

的青菜循環太多嵌套。您gererating樣式.leftBound div ul li li

問題3：

我們沒有看到在模板中的任何leftBound類。

這裏是你會得到什麼fiddle，爲您提供解決這三個問題。（注意：增加了引導程序list-unstyled類到殺默認列表樣式）

來源

2015-10-18 12:18:50

感謝您解決我的問題。問題＃1和＃3中提到的問題是指代碼中的其他地方。問題2實際上完成了這項工作。再次感謝 – CTSK

不客氣:) –

Ang-ng-repeat和Sass衝突

回答

相關問題