模型更改時，在ngClass指令中更新類名稱

Question

我正在使用AngularJS和Bootstrap網格，以呈現一些需要實時更新的信息。 但是，這還應該更新引導程序列的大小和偏移量。 我有兩個嵌套的重復項，我訪問了祖父母范圍內的數據（由於重復項創建了子范圍）：

<div class="col-xs-{{$parent.$parent.colWidth}}" ng-repeat="w in $parent.widths track by $index" ng-class="{'col-xs-offset-{{$parent.$parent.colOffset}}':$first}">

當我更新$scope.colOffset時出現問題： col-xs-offset-[value] $scope.colOffset [value]中的col-xs-offset-[value]不受影響。 但是，如果我將元素添加到$scope.widths則新創建的元素具有正確的值，而原始元素具有過時的值。

我正在使用$watch跟蹤$scope.plate.width （這是不斷變化的值）中的更改，並更新相關變量$scope.colOffset, $scope.colWidth, $scope.widths ：

$scope.$watch('plate.width', function(newValue, oldValue) {
    var newValue = parseInt(newValue);
    $scope.colWidth = Math.floor(Math.min(12 / newValue, 12));
    $scope.colOffset = Math.floor((12 - $scope.colWidth * newValue) / 2);
    $scope.widths = $scope.getNumber(newValue);
});
$scope.getNumber = function(n) {
    var ar = new Array(n);
    return ar;
}

有趣的是， col-xs-[value]已更新，而col-xs-offset-[value]未更新。

Answer 1

從AngularJS ngClass文檔（ https://docs.angularjs.org/api/ng/directive/ngClass ）：

當表達式更改時，先前添加的類將被刪除，然后才添加新類。

您可以添加col-xs-offset-[value]作為默認類，然后追加另一個類，例如，第一列的col-xs-first可以解決您的問題。