Angular ng-repeat and Sass conflict

Angular ng-repeat and Sass conflict

本文关键字：conflict Sass and ng-repeat Angular      更新时间：2023-09-26

我现在正在做一个项目。遗憾的是，我被困在以下问题:

我正在使用ng-repeat来填充形成导航栏的列表，并使用Sass来根据元素的数量调整列表元素的宽度，以便宽度均匀分布。

它看起来像这样:

<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%，以此类推。

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

编辑:澄清问题。:

问题1:

在模板中，您有两个class属性:

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

问题# 2:

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

问题# 3:

模板中没有leftBound类。

如果您解决了这三个问题，下面是您将得到的文件。(注:添加引导list-unstyled类杀死默认列表样式)

相关文章：