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时出现问题：[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，如果可以解决您的问题。

模型更改时更新ngClass指令中的类名

1 个答案: