Javascript angularjs-动态函数返回

index.html

<div ng-repeat="object in objects" ng-style="getStyle(object.id)"></div>

---

这段代码运行在一个无限的$digest循环中。我想我知道为什么。返回值不应该是动态的。但是如果没有循环，我怎么能意识到这一点呢？我想显示不同宽度的对象。对象的宽度取决于前一个对象的值。

问题在于

ng style

在每个子作用域上放置

$watchExpression

$watchExpression

必须是幂等的，这意味着它必须通过多次检查返回相同的表达式。
如果

$watchExpression

仍然脏则会触发另一个

$digest

更新 在我看到了很好的答案后，我想出了更好的解决方案：

这是一个演示plunker：

控制器：

$scope.$watchCollection('objects', function calculateWidths() {
  var tempWidth = 0;
  for( var i = 0; i < $scope.objects.length; i++) {
    tempWidth += $scope.objects[i].value;
    $scope.objects[i].width = tempWidth + 'px';
  }
});

<div ng-repeat="object in objects" ng-style="{width: object.width}">

$scope.$watchCollection（'objects'，function calculateWidths（）{
var tempWidth=0；
对于（变量i=0；i<$scope.objects.length；i++）{
tempWidth+=$scope.objects[i].value；
$scope.objects[i].width=tempWidth+'px'；
}
});

标记：

$scope.$watchCollection('objects', function calculateWidths() {
  var tempWidth = 0;
  for( var i = 0; i < $scope.objects.length; i++) {
    tempWidth += $scope.objects[i].value;
    $scope.objects[i].width = tempWidth + 'px';
  }
});

<div ng-repeat="object in objects" ng-style="{width: object.width}">

老办法

---

这里有一个问题：

问题是

ng样式

在每个子作用域上放置一个

$watchExpression

$watchExpression

必须是幂等的，这意味着它必须通过多次检查返回相同的表达式。
如果

$watchExpression

仍然脏则会触发另一个

$digest

更新 在我看到了很好的答案后，我想出了更好的解决方案：

这是一个演示plunker：

控制器：

$scope.$watchCollection('objects', function calculateWidths() {
  var tempWidth = 0;
  for( var i = 0; i < $scope.objects.length; i++) {
    tempWidth += $scope.objects[i].value;
    $scope.objects[i].width = tempWidth + 'px';
  }
});

<div ng-repeat="object in objects" ng-style="{width: object.width}">

$scope.$watchCollection（'objects'，function calculateWidths（）{
var tempWidth=0；
对于（变量i=0；i<$scope.objects.length；i++）{
tempWidth+=$scope.objects[i].value；
$scope.objects[i].width=tempWidth+'px'；
}
});

标记：

$scope.$watchCollection('objects', function calculateWidths() {
  var tempWidth = 0;
  for( var i = 0; i < $scope.objects.length; i++) {
    tempWidth += $scope.objects[i].value;
    $scope.objects[i].width = tempWidth + 'px';
  }
});

<div ng-repeat="object in objects" ng-style="{width: object.width}">

老办法

---

这里有一个问题：

问题是

ng样式

在每个子作用域上放置一个

$watchExpression

$watchExpression

必须是幂等的，这意味着它必须通过多次检查返回相同的表达式。
如果

$watchExpression

仍然脏则会触发另一个

$digest

更新 在我看到了很好的答案后，我想出了更好的解决方案：

这是一个演示plunker：

控制器：

$scope.$watchCollection('objects', function calculateWidths() {
  var tempWidth = 0;
  for( var i = 0; i < $scope.objects.length; i++) {
    tempWidth += $scope.objects[i].value;
    $scope.objects[i].width = tempWidth + 'px';
  }
});

<div ng-repeat="object in objects" ng-style="{width: object.width}">

$scope.$watchCollection（'objects'，function calculateWidths（）{
var tempWidth=0；
对于（变量i=0；i<$scope.objects.length；i++）{
tempWidth+=$scope.objects[i].value；
$scope.objects[i].width=tempWidth+'px'；
}
});

标记：

$scope.$watchCollection('objects', function calculateWidths() {
  var tempWidth = 0;
  for( var i = 0; i < $scope.objects.length; i++) {
    tempWidth += $scope.objects[i].value;
    $scope.objects[i].width = tempWidth + 'px';
  }
});

<div ng-repeat="object in objects" ng-style="{width: object.width}">

老办法

---

这里有一个问题：

问题是

ng样式

在每个子作用域上放置一个

$watchExpression

$watchExpression

必须是幂等的，这意味着它必须通过多次检查返回相同的表达式。
如果

$watchExpression

仍然脏则会触发另一个

$digest

更新 在我看到了很好的答案后，我想出了更好的解决方案：

这是一个演示plunker：

控制器：

$scope.$watchCollection('objects', function calculateWidths() {
  var tempWidth = 0;
  for( var i = 0; i < $scope.objects.length; i++) {
    tempWidth += $scope.objects[i].value;
    $scope.objects[i].width = tempWidth + 'px';
  }
});

<div ng-repeat="object in objects" ng-style="{width: object.width}">

$scope.$watchCollection（'objects'，function calculateWidths（）{
var tempWidth=0；
对于（变量i=0；i<$scope.objects.length；i++）{
tempWidth+=$scope.objects[i].value；
$scope.objects[i].width=tempWidth+'px'；
}
});

标记：

$scope.$watchCollection('objects', function calculateWidths() {
  var tempWidth = 0;
  for( var i = 0; i < $scope.objects.length; i++) {
    tempWidth += $scope.objects[i].value;
    $scope.objects[i].width = tempWidth + 'px';
  }
});

<div ng-repeat="object in objects" ng-style="{width: object.width}">

老办法

---

下面是一个例子：

我同意Ilan的问题描述和解决方案-它可以在

对象

数组不改变的情况下工作，否则宽度的计算将不正确。如果可以在运行时添加/删除新对象，则最好在集合更改时（请参见范围方法）或在每个摘要周期（对于元素的简短列表，它应足够快）重新计算宽度，类似于：

  var widths = [];
  $scope.$watch(function calculateWidths() {
    var tempWidth = 0;
    widths = [];
    angular.forEach($scope.objects, function(obj) {
      tempWidth += obj.value;
      widths.push(tempWidth);
    });
  });

  $scope.getStyle = function(idx){
    return {width: widths[idx] + 'px'}
  }

---

我同意Ilan的问题描述和解决方案-它在

对象

数组不改变的情况下工作，否则宽度将计算不正确。如果可以在运行时添加/删除新对象，则最好在集合更改时（请参见范围方法）或在每个摘要周期（对于元素的简短列表，它应足够快）重新计算宽度，类似于：

  var widths = [];
  $scope.$watch(function calculateWidths() {
    var tempWidth = 0;
    widths = [];
    angular.forEach($scope.objects, function(obj) {
      tempWidth += obj.value;
      widths.push(tempWidth);
    });
  });

  $scope.getStyle = function(idx){
    return {width: widths[idx] + 'px'}
  }

---

我同意Ilan的问题描述和解决方案-它在

对象

数组不改变的情况下工作，否则宽度将计算不正确。如果可以在运行时添加/删除新对象，则最好在集合更改时（请参见范围方法）或在每个摘要周期（对于元素的简短列表，它应足够快）重新计算宽度，类似于：

  var widths = [];
  $scope.$watch(function calculateWidths() {
    var tempWidth = 0;
    widths = [];
    angular.forEach($scope.objects, function(obj) {
      tempWidth += obj.value;
      widths.push(tempWidth);
    });
  });

  $scope.getStyle = function(idx){
    return {width: widths[idx] + 'px'}
  }

---

我同意Ilan的问题描述和解决方案-它在

对象

数组不改变的情况下工作，否则宽度将计算不正确。如果可以在运行时添加/删除新对象，则最好在集合更改时（请参见范围方法）或在每个摘要周期（对于元素的简短列表，它应足够快）重新计算宽度，类似于：

  var widths = [];
  $scope.$watch(function calculateWidths() {
    var tempWidth = 0;
    widths = [];
    angular.forEach($scope.objects, function(obj) {
      tempWidth += obj.value;
      widths.push(tempWidth);
    });
  });

  $scope.getStyle = function(idx){
    return {width: widths[idx] + 'px'}
  }

---

谢谢您的回答！由于

对象

数组的变化，我使用了GRaALThank的解决方案，谢谢你的回答！由于

对象

数组的变化，我使用了GRaALThank的解决方案，谢谢你的回答！由于

对象

数组的变化，我使用了GRaALThank的解决方案，谢谢你的回答！由于

obje的变化