计算隐藏元素

Question

我使用PHP循环遍历需要在我的页面上过滤的数据，然后使用ng-hide隐藏和显示基于我的控制器中的过滤器数组的数据。

然而，当我尝试创建一些结果脚本时，它似乎只获得之前显示的结果数（所以如果我从3开始，并点击仅显示2个结果的内容，显示的结果将显示3 ）。

    /* Watch for changes in the Filter JSON array. */
    $scope.$watchCollection('Filter', function(){
       $scope.filterResults = $(".compContOuter").not(".ng-hide").length;
    });

    /* Get the results shown upon page load */
    $scope.filterResults = $(".compContOuter").not(".ng-hide").length;

有一个span标记，ng-bind='filterResults'显示div的长度。

示例图片：

Answer 1

肮脏的方式： 通常，可以通过在代码周围添加$ timeout来修复这些延迟问题，例如

$scope.$watchCollection('Filter', function(){
    $timeout(function(){
        $scope.filterResults = $(".compContOuter").not(".ng-hide").length;
    });
});

我不明白的是，您已经拥有每个过滤器括号内的数字，是否可以分配给标题？

Answer 2

正如其他人所建议的那样，你不应该在你的控制器中这样做，你应该避免一起使用jQuery。

但您的问题是由$scope未更新引起的。您可以在$scope.$applyAsync()回调中添加$watchCollection。例如：

$scope.$watchCollection('Filter', () => {
   $scope.filterResults = $(".compContOuter").not(".ng-hide").length;
   $scope.$applyAsync();
});

这将强制在$ scope上进行摘要循环。

Answer 3

//if you play with watch then for you have to destroy it also so it will 
//make performance boost and make angular digest life cycle easy..hope it 
//make sense

var filterWatch = $scope.$watchCollection('Filter', function(){
    $timeout(function(){
        $scope.filterResults = $(".compContOuter").not(".ng-hide").length;
    });
});

//Destroy watch here
$scope.$on('$destroy', filterWatch);