使用JS对象NG重复困难时期 [英] Hard time using JS object in ng-repeat

问题描述

我有我试图让我能够使用过滤器与NG-重复转换为数组一种奇怪的结构化对象。

I have a strangely structured object which I am trying to convert to an array so that I am able to use filters with ng-repeat.

下面是一个例子对象：

var sysData = {
"walkerduct": {
    "id": 0,
    "uri": "walkerduct",
    "name": "Walkerduct",
    "imageS": "img/callcenter.jpg",
    "imageL": "img/callcenter.jpg",
    "copy": "Walkerduct info",
    "relatedSys": [],
    "relatedApp": []
 }
}

我的控制，我试图将其转换为一个数组，

My controller where I attempt to convert it to an array,

inFloorControllers.controller('ApplCtrl', ['$scope', '$routeParams',
function ($scope, $routeParams) {
    //alert("OtherCtrl hit");
    $scope.appData = appData;
    $scope.sysData = sysData;
    $scope.title = appData.title;
    $scope.sysArr = [];
    var hasData = true;
    var idx = 0;
    while (hasData) {
        var data = sysData[idx];
        alert("yo");
        if (data) {
            $scope.sysArr.push(data);
            idx++;
        }
        else {
            hasData = false;
        }
    }
    for (i = 0; i < $scope.sysArr.length; i++) {
        alert($scope.sysArr[i]);
    }
}
]);

最后我的HTML，

And finally my HTML,

<div ng-repeat="sys in sysArr | limitTo:3">
    <a href=#/systems/{{sys.uri}}>{{sys.name}}</a>
</div>

我没有看到我在做什么错了......它甚至不打如果（数据） ...感谢。

推荐答案

只需使用 Object.keys 结合 Array.map ，就像这样：

Just use Object.keys combined with Array.map, like this:

inFloorControllers.controller('ApplCtrl', ['$scope', '$routeParams',
function ($scope, $routeParams) {
    $scope.appData = appData;
    $scope.sysData = sysData;
    $scope.title = appData.title;
    $scope.sysArr = Object.keys($scope.sysData).map(function(key){ 
                       return $scope.sysData[key];
                    });
}
]);

如果您需要IE8的支持，你需要的<一个href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill\"相对=nofollow>填充工具的地图功​​能。

If you need support for IE8 you will need the polyfill for the map function.

这篇关于使用JS对象NG重复困难时期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！