AngularJS ng-repeat | 通過$ index跟蹤無法正常工作

Question

我無法track by $index來track by $index我的ng-repeat表。 我收到錯誤消息，指出“期望的數組，但收到0：”。 問題是我的JSON沒有任何ID，因此我需要為每一行創建一些ID。

控制器：

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

$ scope.GTMcontainersAccount包含（JSON）：

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

視圖：

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

我在控制台中得到的錯誤代碼：

main.min.js：3錯誤：[filter：notarray]預期但收到的數組：0

Answer 1

角度過濾器適用於數組，而不適用於對象。

角度文件說

從array選擇項的子集，並將其作為新數組返回。

您可以將對象轉換為數組，也可以手動過濾對象，例如

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

並在控制器中

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