Javascript ng样式/动态照片栅格上的角度摘要循环

我有一个过滤器，可以更改过滤对象。但是当我使用

ng style=“item.gridSize”

我的过滤器：（大小网格的算法是从

angular.module（“custom.modules.photoGrid”，[]）.filter（'photoSearch'，[function（）{
功能getGrid（照片）{
var输出=[]；
var高度=[]；
var列_宽度=227；
var保证金=6；
varδ=20；
变量大小=window.innerWidth-50；
变量n_列=数学楼层（尺寸/（2*（列宽+边距））；
创建_列（n_列）；
var small_images=[]；
函数创建_列（n）{
高度=[]；
对于（变量i=0；i=2）{
对于（变量i=0；i0.8）{
数据[i]['gridSize']=gridSize（列*2，真）；
高度[列]+=2；
}否则{
小图片。推（i）；
如果（小图像长度===2）{
数据[small_images[0]['gridSize']=gridSize（第*2列，false）；
数据[small_images[1]['gridSize']=gridSize（列*2+1，false）；
高度[列]+=1；
小图像=[]；
}
}
}
if（小图像长度）{
column=get_min_column（）；
数据[（data.length-1）]['gridSize']=gridSize（第*2列，false）；
}
}
返回数据；
}
var grid=createGrid（照片）；
返回网格；
}
返回功能（照片、搜索）{
var筛选=[]；
如果（！！搜索）{/**@case1如果只存在搜索查询**/
search=search.toLowerCase（）；
对于（var i=0；i

Html:

{{results.length}找到照片

一个小小的解释： 每次

ng model

input.value

changed过滤器都会运行，并为过滤后的照片数组创建不同的网格。所有维度都写在

gridSize

中，这会导致摘要循环

到目前为止，我一直在尝试：我在指令中移动了我的

ng repeat

，但这样我无法访问

result.length

和

input.value

我还尝试了一个

bindonce

指令，但像

bo style=“photo.gridSize”

这样使用它，在用户搜索后不会更改网格（逻辑上是正确的，因为它只被出价一次，但值会更改）

所以我的问题是如何使

ng repeat

分配新的

grdiSize

属性而不在摘要循环中运行。

更新：

---

工作小提琴：

有几个问题。这不完全是

ng风格的问题，而是在每个摘要周期中，您的照片计算不同的风格对象，导致另一个摘要周期运行

我发现了一些问题：


逻辑中的错误是给出0列，因此导致在计算
边距顶部时，size给出
NaN
，但失败。为了解决此问题，我从1列中添加了一个默认值

每次执行筛选函数时，您的
Math.random（）>0.8
都会给出不同的结果。在每个摘要循环中，由于
Math.random（）
会给出不同的结果，因此它会强制另一个摘要循环（您正在更新gridSize对象-因为
ng repeat
中的每个元素都有一个
$watch
，它会检测更改并强制执行一个摘要循环），等等。这就是控制台中的错误日志

我创建了一个有效的。主要的变化是

声明数组后，为每张照片定义一个固定的随机值

$scope.photos.forEach(function(onePhoto){
    onePhoto.randomValue = Math.random();
  });

然后在过滤器中检查该值

if (data[i].randomValue > 0.8) {
}

并在创建列时至少设置1列

var n_columns = Math.max(1, Math.floor(size / (2 * (COLUMN_WIDTH + MARGIN))));

而且（但我相信这只发生在你的小提琴上），没有要过滤的
photo\u name
，所以我使用了
id

您可能希望用其他默认值修复
NaN
问题，但至少现在您知道了控制台错误的问题

如果您想在每次执行搜索时更新随机值，可以在
输入值上放置一个
$watch
，将迭代照片和创建随机值的代码移动到一个窗口中
if (data[i].randomValue > 0.8) {
}

var n_columns = Math.max(1, Math.floor(size / (2 * (COLUMN_WIDTH + MARGIN))));

var updateRandomValues = function() {
    $scope.photos.forEach(function(onePhoto){
        onePhoto.randomValue = Math.random();
      });
  };
  updateRandomValues();
  $scope.$watch('input.value', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        updateRandomValues();
    }
  });

$scope.$watch('results', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        updateRandomValues();
    }
  });