Question

最初我有这种硬编码的HTML。

<div class="col-xs-2">
  <div class="days-group">
    <input type="checkbox" id="Mondays" value="1">
    <label for="Mondays">Mondays</label>
  </div>
  <div class="days-group">
    <input type="checkbox" id="Tuesdays" value="2">
    <label for="Tuesdays">Tuesdays</label>
  </div>
  <div class="days-group">
    <input type="checkbox" id="Wednesdays" value="3">
    <label for="Wednesdays">Wednesdays</label>
  </div>
</div>
<div class="col-xs-2">
  <div class="days-group">
    <input type="checkbox" id="Thursdays" value="4">
    <label for="Thursdays">Thursdays</label>
  </div>
  <div class="days-group">
    <input type="checkbox" id="Fridays" value="5">
    <label for="Fridays">Fridays</label>
  </div>
  <div class="days-group">
    <input type="checkbox" id="Saturdays" value="6">
    <label for="Saturdays">Saturdays</label>
  </div>
</div>
<div class="col-xs-2">
  <div class="days-group">
    <input type="checkbox" id="Sundays" value="">
    <label for="Sundays">Sundays</label>
  </div>
</div>

然后我使用ng-repeat和对象数组。但我没有使用ng-class条件添加类。

<div ng-repeat="day in days" ng-class="{'col-xs-2':'$index % 3 === 0'}">
                    <div class="days-group">
                        <input id="{{day.value}}"type='checkbox' value="{{day.value}}" check-list='checked_days'> 
                        <label for="{{day.value}}">{{day.name}}</label>
                    </div>
               </div>

这里有什么问题？逻辑是如果元素是3然后添加一个col-xs-2。

Answer 1

尝试这样的事情：

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
        <div class="col-xs-4">{{products[$index]}}</div>
        <div class="col-xs-4" ng-if="products.length > ($index + 1)">{{products[$index + 1]}}</div>
        <div class="col-xs-4" ng-if="products.length > ($index + 2)">{{products[$index + 2]}}</div>
    </div>

已更新：工作jsfiddle链接：

https://jsfiddle.net/avnesh2/73dzmnuh/2/

希望对你有用。

Answer 2

状态检查中的报价不正确。只需使用没有这样的引号 -

ng-class="{'col-xs-2':$index % 3 === 0}"

Answer 3

我从你的代码中理解的是，你只需要索引为3或0的倍数的行的col-sm-2类

给出ng-class条件的方式有误

你写得像这样

ng-class="{'col-xs-2':'$index % 3 === 0'}"

但它应该是

ng-class="{'col-xs-2':$index % 3 === 0}"

因为

 $index % 3 === 0 is Boolean which is either true or false based on this condition your class will come or not come

如果你的条件是

 '$index % 3 === 0' this will now become string which will be either 'true' or 'false' so condition is always true hence class will always be there

ng类条件因模数而失败

3 个答案: