Question

我有这个项目数组

[
  {
    name: 'Foo',
    completed: false
  },
  {
    name: 'Ninja',
    completed: true
  },
  {
    name: 'Hello',
    completed: true
  },
  {
    name: 'Baby',
    completed: false
  },
]

我希望在我的视图中显示完成的数量= true。当元素从completed = false变为true时，我还需要此计数器自动更新。有没有办法以角度来做这个？

Answer 1

您应该查看过滤器并使用它来动态过滤您的阵列; 在您的控制器中声明您的过滤器

$scope.completedFilter(object) {
    return object.completed === true;
}

在模板中后，您只需添加

即可

{{(myArray | filter:completedFilter).length}}

您的点数将随着已完成的

自动更改

注意：如果你想在另一个控制器中重用它，你也可以在你的模块中声明一个适当的过滤器

Answer 2

您可以采取多种方法，但它们都首先缓存控制器加载时完成的项目数量。

您可以使用$watch函数来监视数组，并在对象更改时更新计数器。以下是未经测试的，但应该让您了解如何做到这一点

function myCtl($scope, itemFetcher) {
  $scope.items = itemFetcher.get(); //retrieves your array of items
  $scope.numComplete = countComplete();

  $scope.$watch("items", function(newValue, oldValue) {
    $scope.items = newValue;
    $scope.numComplete = countComplete();
  }, true); // NOTE: passing true into $watch is necessary to do a deep compare (i.e. comparing object properties), and I think it is required in this case, but it has a negative impact on performance & memory.

  function countComplete() {
    var cnt = 0;
    angular.forEach($scope.items, function(item) {
      cnt += item.completed ? 1 : 0;
    }
    return cnt;
  }
}

或者，您可以在修改项目已完成状态的函数中更新已完成的计数。以下代码也未经过测试。

function myCtl($scope, itemFetcher) {
  $scope.items = itemFetcher.get(); //retrieves your array of items
  $scope.numComplete = countComplete();

  $scope.markItem = function(index, newState) { // this function is referenced in your HTML template
    $scope.items[index].complete = newState;
    $scope.numComplete += (newState) ? 1 : -1;
  }

  function countComplete() {
    var cnt = 0;
    angular.forEach($scope.items, function(item) {
      cnt += item.completed ? 1 : 0;
    }
    return cnt;
  }
}

使用$watch更方便，更不容易出错，但可能会导致性能问题，具体取决于items数组的大小。第二种方法更有效，但维护起来更难。

Answer 3

是否需要添加$ watch？

试试这种方式

 $scope.itemCount = function () {
    var cnt = 0;
    angular.forEach($scope.items, function (item) {
        cnt += item.completed ? 1 : 0;
        console.log(item);
    });
    return cnt;
}

只是为了检查计数是否正在更新我在按钮上添加了一个项目点击到项目数组

$scope.insertItem = function () {
    $scope.items.push({ name: 'Phani', completed: true });

}
{{itemCount()}}

    <input type="button" ng-click="insertItem()" value="Insert" />

尝试上述方法

Angular：计算与条件匹配的项目

3 个答案: