javascript - Angular 访问 ng-repeat 指令中全部对象的最佳方式是什么

标签 javascript angularjs

访问 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>

最佳答案

通过创建返回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>

关于javascript - Angular 访问 ng-repeat 指令中全部对象的最佳方式是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35845550/

相关文章:

angularjs - 如何防止错误 : [ng:btstrpd] App Already Bootstrapped with this Element 'document'

angularjs - 如何创建 AngularJs svg 指令

angularjs - 当状态参数改变时刷新 ui-router View ?

javascript - 如何通过另一个 DOM 触发 INPUT FILE 事件 REACTJS

javascript - 禁用谷歌地图上的捏合缩放[桌面]

javascript - 在 javaScript 中给定时间后图像没有改变

javascript - 切换函数 JavaScript

angularjs - laravel 请求未定义

javascript - 从任意字符串生成图像

javascript - 当服务器未按照请求的顺序返回数据时,在 Angular 中键入时进行搜索以显示准确的结果?