获取最外层 ng-repeat 中嵌套 ng-repeat 的计数，并根据 ng-model 值动态更新答案

【问题标题】：Get the count of nested ng-repeat in the outermost ng-repeat and update in dynamically according to ng-model value获取最外层 ng-repeat 中嵌套 ng-repeat 的计数，并根据 ng-model 值动态更新
【发布时间】：2017-07-10 05:04:44
【问题描述】：

我有三个嵌套的 ng-repeat 来显示驱动器对应的文件夹和对应的文件。示例数据如下所示

Drives=[  
   {  
      name:'C Drive',
      folders:[  
         {  
            name:'personal',
            files:[  
               {  
                  name:'a.txt'
               },
               {  
                  name:'b.txt'
               }
            ]
         }
      ]
   }
]

所以我有三个嵌套的 ng-repeat 来显示驱动器名称、它的文件夹和文件夹中的文件。如何获取驱动器中的文件总数并将其显示在驱动器名称旁边。

示例代码

<div ng-repeat="drive in drives">
{{drive.name}} <I want the total count of files in a drive here>
    <div ng-repeat="folder in drive.folders">
    {{folder.name}} {{filteredfiles.length}}
        <div ng-repeat="file in filteredfiles=(folder.files | filter 
        {name:search})">
        {{file.name}}
        </div>
    </div>
</div>
<input type="text" ng-model="search"/>

请注意，我有一个搜索过滤器，因此驱动器中的文件数应根据应用的过滤器值动态更新，以表示与特定驱动器中的搜索值同名的文件数。

如何递增计算驱动器中的文件数量并应用双向绑定，以便根据搜索值更新计数？

对于 Angular 1.6 版

【问题讨论】：

什么版本的角度？
对于 Angular 1.3 版
你还在坚持使用 Angular 1.3 吗？这可以使用更高版本（1.5 或更高版本）以不同方式处理。您必须发布相关的控制器布局才能完全回答问题
对不起。它的 1.6.4 版本和控制器只有要显示的 JSON 对象
那么，您使用的是组件，对吗？

标签： html angularjs angularjs-ng-repeat angularjs-filter angularjs-ng-model

【解决方案1】：

修改filteredfiles，使它们包含在一个控制器对象中，您可以迭代该对象以获得所有数组的总长度。第一级键使用驱动器索引，下一级使用文件夹索引。

然后使用控制器函数，该函数使用Array#reduce（或for in 循环）迭代所有各种对象键以求和所有数组长度

查看：

 <div ng-repeat="drive in drives">

    <strong>{{drive.name}}</strong>  -- File count:{{filteredFileCount($index)}}

    <div ng-repeat="folder in drive.folders" ng-init="driveIndex = $parent.$index">
     {{folder.name}} has {{filteredfiles[driveIndex][$index].length}} files
     <ul>
        <li ng-repeat="file in filteredfiles[driveIndex][$index]=(folder.files | filter:{name:search} ) ">
        {{file.name}}
      </li>
     </ul>

    </div>
  </div>

控制器：（或将业务逻辑投入服务）

  // object to hold arrays filtered in view
  $scope.filteredfiles = {};

  $scope.filteredFileCount = function(driveIndex) {

    let driveObj = $scope.filteredfiles[driveIndex] || {};

    return  Object.keys(driveObj).reduce((a, c) => {
      return a + (Array.isArray(driveObj[c]) ? driveObj[c].length : 0);
    }, 0);

  }

DEMO

【讨论】：

完美运行..谢谢

【解决方案2】：

有两种方法可以处理这个问题。如果使用组件并且组件被适当地嵌套（它们应该是），您可以简单地在子组件定义中传递一个变量，如下所示：

.component('ComponentName', {
    bindings: {
          myVariable: '=' //Look up the appropriate sigil for the binding behavior you want
        }, 
`//....rest of component def here

    })

然后您只需通过在路由器中（或实例化组件时）创建的指令将其传递下来

<my-directive my-variable="$ctrl.myVariable"></my-directive>

示例：https://toddmotto.com/one-way-data-binding-in-angular-1-5/

或者，您只需创建一个服务并让它成为两个控制器中的依赖项，并通过 getter/setter 在那里设置值，因为服务是单例的并且可以在控制器之间维护值。

【讨论】：