AngularJS统计指定年龄数据数量及data-badge绑定失效问题求助

针对你遇到的两个问题，我来一步步帮你解决：

一、统计age为20的条目数量（避免ng-if导致的索引长度问题） #

你用ng-if尝试统计时拿到索引长度，是因为ng-if本质是控制DOM元素的显示/隐藏，若在ng-repeat里配合它再去获取元素长度，本质是在操作DOM，这种方式既不优雅还容易出问题。更合适的做法是在控制器中预先计算，或使用AngularJS的过滤器：

方法1：在控制器中计算（推荐，性能更优） #

直接在myctrl控制器里添加统计逻辑，把结果赋值给$scope变量：

var app = angular.module('myApp', []); 
app.controller('myctrl', function ($scope) { 
  $scope.friends = [ 
    { name: "Peter", age: 20 }, 
    { name: "Pablo", age: 55 }, 
    { name: "Linda", age: 20 }, 
    { name: "Marta", age: 37 }, 
    { name: "Othello", age: 20 }, 
    { name: "Markus", age: 32 } 
  ]; 
  // 统计age为20的条目数量
  $scope.age20Count = $scope.friends.filter(function(friend) {
    return friend.age === 20;
  }).length;
});

之后在视图里直接用{{age20Count}}就能拿到正确数量（这里结果是3）。

方法2：使用AngularJS过滤器（适合简单场景） #

如果不想修改控制器，也可以在视图里用filter和length过滤器组合：

{{ friends | filter:{age:20} | length }}

注意：如果数据量较大，这种方式每次digest循环都会重新计算，性能不如控制器预先计算的方案。

二、解决data-badge属性绑定不生效的问题 #

AngularJS对原生HTML属性（比如data-badge）的插值绑定，需要用ng-attr-前缀来告知Angular解析属性值。你原来的写法data-badge={{len}}不会被正确处理，改成以下方式即可：

<ul ng-if="result.type=='mesh'" class="mdl-list__item-primary-content mdl-badge results-icon" ng-attr-data-badge="{{age20Count}}">

用ng-attr-data-badge替代data-badge后，Angular会自动把插值后的结果赋值给data-badge属性。

这样两个问题就都解决啦，你可以根据场景选择统计方式，绑定原生属性记得加上ng-attr-前缀哦~

内容的提问来源于stack exchange，提问作者Selin Elibol