Question

我有一个嵌套的ng-repeat列表，我想在修改嵌套列表中的任何项目时向父类添加一个类。

看起来像这样：

<div ng-repeat="pa in products" ng-class="{full: vari.basket>0}">
    <div ng-repeat="vari in pa.variacions">
       <input type="number" ng-model="vari.basket" name="basket" min="0" max="20" step="1" ng-init="vari.basket=0">
    </div>
</div>

所以基本上我想在任何变量项都有一个篮子＆gt;时添加full类。 0

到目前为止还没有工作，我错过了什么？

Answer 1

您可以在控制器中添加一个功能，为您的父级设置类。

<div ng-repeat="pa in products" ng-class="{full: isFull(pa.variacions)}">
    <div ng-repeat="vari in pa.variacions">
       <input type="number" ng-model="vari.basket" name="basket" min="0" max="20" step="1" ng-init="vari.basket=0">
    </div>
</div>

在您的控制器中：

$scope.isFull = function(variacions) {
  if (!Array.isArray(variacions)) {
    return false;
  }

  return variacions.find(vari => vari.basket > 0);
}

Answer 2

<div ng-repeat="pa in products" ng-class="{true: 'myFullClass'}[$ctrl.isProductBasketFull(pa)]">
    <div ng-repeat="vari in pa.variacions">
        <input type="number" ng-model="vari.basket" name="basket" min="0" max="20" step="1" ng-init="vari.basket=0">
    </div>
</div>

这不是一个理想的解决方案，因为会生成所有循环但你可以将pa传递给控制器函数，该函数确定vari篮子是否已满，然后返回一个布尔值值。

在控制器中：

$scope.isProductBasketFull = function(pa){
    for(var i=0,cnt=pa.length;i<cnt;i++)
        if(pa[i].basket === maxVal) // whatever your max value is
            return true;
    return false;
};

使用嵌套ng-repeat中的ng-class

2 个答案: