Question

我已经在这几天了，我只能承认我对此事缺乏了解。我有一个文章数组，我从$ http请求收到，并通过调用sortArticles（文章）迭代到以下结构。原因是简化了httpData对象的结构并摆脱了一些嵌套数组（为了便于阅读，我删除了一些代码）。

article.service.js：

function sortArticles(httpData){
    var sortedList = [];
    for(var i = 0; i < httpData.length; i++){
        var date = new Date(httpData[i].Date);
        var tmpObj = {Name: httpData[i].Name, 
                      Price: httpData[i].Price, 
                      Date: date};
        // I want my controller to receive a list with all articles
        // linked to a specific date in the same array. Reason being;
        // Each date will become a tab in the view:
        if(typeof sortedList[date] == "undefined"){
           sortedList[date] = [];
           sortedList[date][0] = tmpObj;
        }else{
           sortedList[date][sortedList[date].length] = (tmpObj);
        }

    }
    return sortedList;
}

现在我收到上面的sortedList的控制器如下所示：

article.controller.js：

angular
.module('app')
.controller('ArticleController', ArticleController);

ArticleController.$inject = ['articleservice'];

function ArticleController(articleservice) { 

    var vm = this;
    articleservice.getArticles()
        .then(function(data){
            vm.sortedList = data;
            for(var i in vm.sortedList){
                console.log("i: ", i, " ### vm.sortedList[i]: ", vm.sortedList[i] + "\n");
            }
        },
        function(reason){
            console.log(reason);
        })
        .catch(function(err){
            console.log(err);
        });
}

在上面的console.log（）中，所有内容都显示在浏览器的控制台中，如下所示：

i：2015年9月2日星期三### vm.articles [i]：[object Object]，[object Object] ....等 i：2015年9月3日星期三### vm.articles [i]：[object Object]，[object Object] .... etc

对我来说，这是阵列工作的证明。

但是如何用ng-repeat显示角度？我只是得到一个包含以下所有尝试的空白页面：

<span ng-repeat="(key, value) in vm.sortedList">{{key}}</span>


<span ng-repeat="(key, value) in vm.sortedList">{{value[key]}}</span>

<div ng-repeat="(key, value) in vm.sortedList">
   <div ng-repeat="article in value[key]">{{article.Name}}</div></div>

半伪代码的最终目标是这样的

   <md-tab ng-repeat="date in vm.sortedList" label: {{date}}>
        <tabContent>
             <p ng-repeat="article in date">
                   <table>
                      <tr>
                          <th>Name</th>
                      </tr>
                      <tr>article.name</tr>

......等等

请帮助我上网，你是我唯一的希望

Answer 1

在JavaScript数组索引中必须是整数。

以下内容：

vm.sortedList = [];
var date = "May 2015";
vm.sortedList[date] = [];

将一个名为May 2015的属性添加到sortedList，它不会将任何内容推送到数组中。如果您记录它，则可以看到sortedList的长度仍为0。

以下内容：

<p ng-repeat="dates in vm.sortedList">

迭代一个空数组。

改为使用对象：

vm.sortedList = {};

使用以下内容迭代它：

ng-repeat="(key,value) in vm.sortedList"

演示： http://jsfiddle.net/Lka8qx4m/

使用嵌套的json对jsobject进行ng-repeat

1 个答案: