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

Question

我有三个嵌套的 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

Answer 1

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

.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/

或者，您只需创建一个服务并将其作为两个控制器的依赖项并通过 getters/setters 设置值，因为服务是单例的并且可以维护控制器之间的值。

Answer 2

修改 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

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

Get the count of nested ng-repeat in the outermost ng-repeat and update in dynamically according to ng-model value

html

angularjs

angularjs-ng-repeat

angularjs-filter

angularjs-ng-model