Question

访问ng-repeat中的项目长度似乎很简单。 {{array.length}}

但是当你必须通过对象迭代时，你必须知道总数对象然后你没有Angular的东西。

我现在所做的是计算总属性并将其存储在变量中。

$scope.totalPersons =  Object.keys($scope.data).length;

但是当项目添加到对象时，totalPersons不会更新我改变了这个值，因此值会更新。

$scope.$watch( $scope.data, function (newValue, oldValue) {
    $scope.totalPersons = Object.keys($scope.data).length;
});

但是有更好的方法来访问模板中的总对象吗？

<ul>
    <li ng-repeat="(key, value) in data">
        {{key}} - {{value}}  {{totalPersons}}
    </li>
</ul>

Answer 1

通过创建返回Object.keys的自定义过滤器，您可以获得对象键的长度

angular.module('customfilter', []).filter('keys', function() {
  return function(obj) {
    return Object.keys(obj);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='customfilter' ng-init="data={a:1,b:2}">
<p>the array: {{ data | keys}}</p>
  <p>the array length: {{ (data | keys).length}}</p>
</div>

Answer 2

您不需要为它定义过滤器，也可以通过使用$ scope函数来避免手动$watch：

$scope.totalPersons = function() {
    return Object.keys($scope.data).length;
};

现在，只需在HTML中调用此方法：

<ul>
    <li ng-repeat="(key, value) in data">{{key}} - {{value}} -{{totalPersons()}}
    </li>
</ul>

通过这种方式，Angular会自动更新计数。干杯： - ）

Answer 3

您可以扩展对象的原型，但这是反映所有对象的通用解决方案。

Object.prototype.size = function(){
  return Object.keys(this).length
};

然后：

<li ng-repeat="(key, value) in data">{{key}} - {{value}} -{{data.size()}}

或

<ul ng-init="totalPersons=data.size()">
   <li ng-repeat="(key, value) in data">{{key}} - {{value}} -{{totalPersons}}

Angular在ng-repeat指令中访问总对象的最佳方法是什么

3 个答案: