Angular ng-repeat 和 Sass 冲突答案

【问题标题】：Angular ng-repeat and Sass conflictAngular ng-repeat 和 Sass 冲突
【发布时间】：2015-10-18 20:32:47
【问题描述】：

我现在正在做一个项目。可悲的是，我陷入了以下问题：

我正在使用 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%，依此类推。

如何解决这个问题，使元素具有相同的宽度？非常感谢您的帮助。

编辑：澄清问题。：

【问题讨论】：

不要在 css 中使用 :first-child, nth-last-child，使用适当的类。并且在 Angular 中，您在 ng-repeat 中有 $first、$last、$middle、$even、$odd，以便您可以与 ng-class 一起使用
@CTSK，目前尚不清楚您要实现什么，是宽度减小的元素还是宽度相同的元素？只要不清楚 OP 需要什么，我就无法查看对问题的待定编辑
这里不清楚实际问题是什么。这与 Sass、Angular 或 JavaScript 无关：这是一个纯 CSS 问题。如何生成标记/CSS 无关紧要。
只有我认为这个问题可以理解吗？如果有 4 个项目，则应用 25% 宽度，如果有两个项目，则应用 50% 宽度正是 OP 想要实现的目标。对于第一个问题，我认为它还不错，格式很好，所以对我来说这是一个赞成票。哦，@CTSK，欢迎来到 StackOverflow。
@MichaelP.Bazos OP 的工作是将问题提炼成重现问题的最少量代码。 OP添加了很多与问题无关的细节，使得诊断变得比必要的更加困难。不要赞成像“我忘记在我的标记中添加类名”这样的垃圾（提示：这是一个小的印刷错误，你应该投票结束这些问题）。

标签： javascript css angularjs sass

【解决方案1】：

问题 1：

在模板中，你有两个class 属性：

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

问题 #2：

sass 循环嵌套太多。您正在为.leftBound div ul li li 生成样式

问题 #3：

我们在模板中看不到任何leftBound 类。

这是您将获得的fiddle，为您解决这三个问题。（注意：将引导程序 list-unstyled 类添加到 kill 默认列表样式）

【讨论】：

感谢您解决我的问题。问题 #1 和 #3 中提到的点是指代码中的其他地方。问题 #2 实际上完成了这项工作。再次感谢