AngularJS ng-Wiederholung | Verfolgen von $ index funktioniert nicht

Question

Ich kann track by $index nicht an meiner ng-repeat Tabelle arbeiten. Ich bekomme einen Fehler, der sagt "Erwartete Array, aber erhalten: 0". Das Problem ist, dass meine JSON keine ID haben, also muss ich für jede Zeile eine ID erstellen.

Controller:

function getContainer() { 
    $http.get("/api/containers") 
     .then(function (response) { 
       $scope.GTMcontainersAccount = response.data; 
       $scope.loading = false; 
     }) 
} 

$ scope.GTMcontainersAccount enthält (JSON):

{ 
    "0": [], 
    "Account2": [{ 
     "accountId": "1746****", 
     "containerId": "745****", 
    }, { 
     "accountId": "1746****", 
     "containerId": "751****", 
    }], 
    "Account 1": [{ 
     "accountId": "17661****", 
     "containerId": "748****", 
    }] 
} 

Ausblick:

<table class="table"> 
        <thead> 
        <tr> 
         <th>AccountName</th> 
         <th>AccountID</th> 
         <th>ContainerID</th> 
         <th>ContainerName</th> 
         <th>Path</th> 

        </tr> 
        </thead> 

        <tbody ng-repeat="(k,v) in GTMcontainersAccount"> 
        <tr ng-if="!GTMcontainersAccount" colspan="4"> 
         <td>No Containers found for this account</td> 
        </tr> 
        <div id="loading" name="loading" layout="row" layout-sm="column" layout-align="space-around" 
         ng-show="loading"> 
         <md-progress-circular ng-show="loading" md-mode="indeterminate"></md-progress-circular> 
        </div> 


        <tr ng-repeat="(k1,v1) in v | filter:search:strict"> 
         <td>{{ k }}</td> 
         <td>{{ v1.accountId }}</td> 
         <td ng-model="v1.containerId">{{ v1.containerId }}</td> 
         <td>{{ v1.name }}</td> 
         <td><a href="/gui/tags/{{v1.path}}">View Container</a></td> 
         <td> 
          <md-button ng-init="item.isyellow = false;" ng-class="{yellow : item.isyellow}" ng-click="item.isyellow =!item.isyellow; AddFavorite(item.isyellow,v1.containerId)" class="md-icon-button md-accent md-warn" aria-label="Favorite""> 
           <span ng-init="item.isyellow = false;" ng-class="{yellow : item.isyellow}" class="glyphicon glyphicon-heart"></span> 
          </md-button> 
         </td> 
         <td> 
          <md-button type="button" ng-click="row.selected=!row.selected; Hidecontainer(row.selected, v1.containerId);movePerson(index);" class="pull-right btn btn-xs"> 
           <span ng-class="{'glyphicon':true, 'glyphicon-ok':row.selected, 'glyphicon-plus':!row.selected}"></span> 
           {{row.selected?'Hidden':''}} 
          </md-button> 
         </td> 
        </tr> 
        </tbody> 
       </table> 

Fehlercode, die ich in der Konsole erhalten:

main.min.js:3 Error: [filter:notarray] Expected array but received: 0

Answer 1

Angular filters Arbeiten auf Arrays und nicht Objekte.

Winkel Dokumentation sagt

Selects a subset of items from array and returns it as a new array.

Entweder Sie das Objekt in ein Array umwandeln kann, oder Sie können das Objekt manuell wie

<div ng-repeat="(k1,v1) in v | filter:searchFn()"> 
    <td>{{ k1 }}</td> 
    <td>{{ v1.accountId }}</td> 
    ... 
</div> 

und in Controller

$scope.searchFn = function(searchObject) { 
    var result = {}; 
    angular.forEach(items, function(value, key) { 
     //your condition 
    }); 
    return result; 
}