在模型更改时更新 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]中的[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第一列，如果这解决了您的问题。