Question

我正在使用AngularJS和MVC文件结构。我的控制器中有一个数据结构，我希望在我的视图中显示。我有一个自定义的“指标”指令。每个“标题”都属于一个指标，我试图一次显示一组四个指标元素。我使用嵌套的ng-repeats一次显示一个“块”指示器，但是浏览器控制台告诉我数据结构的语法有问题或根本没有显示任何内容。如果我的指标对象没有“块”（嵌套）并且我通过对象进行一次重复，那么一切正常。所以我有两个问题：

有没有人知道在这种情况下进行嵌套ng-repeats的正确方法？
我的指标对象语法错了吗？

这是我的控制器中的指示器对象：

$scope.indicators = 
[{
    "chunk1": {[
        "ind1": {
            "title": 'AC',
            "active": true
         }, "ind2":{
            "title": 'Aux PS',
            "active": true
         }, "ind3":{
            "title": 'Main PS',
            "active": false
         }, "ind4": {
            "title": 'Shutdown',
            "active": true
         }
    ]},

    "chunk2": {[
        "ind1": {
            "title": 'Tx',
            "active": false
         }, "ind2": {
            "title": 'Rx',
            "active": true
         }
    ]}

}];

以下是我观点的一部分：

<div ng-repeat="chunks in indicators" >
    <div ng-repeat="ind in chunks">
        <status-indicator title="ind.title" is-green="true" active="ind.active" ></status-indicator>    
    </div>                          
</div>

Answer 1

您的json /对象结构不正确。它应该是：

[{
  "chunk1": [{
    "ind1": {
      "title": "AC",
      "active": true
    },
    "ind2": {
      "title": "Aux PS",
      "active": true
    },
    "ind3": {
      "title": "Main PS",
      "active": false
    },
    "ind4": {
      "title": "Shutdown",
      "active": true
    }
  }],
  "chunk2": [{
    "ind1": {
      "title": "Tx",
      "active": false
    },
    "ind2": {
      "title": "Rx",
      "active": true
    }
  }]
}]

交换了[]和{}

Answer 2

我通过将结构更改为以下格式来修复它：

{
    "chunk1": {
        "ind1":
         {
            "title": 'AC',
            "active": true
             }, "ind2":{
            "title": 'Aux PS',
            "active": true
         }, "ind3":{
            "title": 'Main PS',
            "active": false
             },
            "ind4": {
            "title": 'Shutdown',
            "active": true
             }
    },

    "chunk2": {
        "ind1": {
            "title": 'Tx',
            "active": false
         }, "ind2": {
            "title": 'Rx',
            "active": true
             }
    }
}

如何用ng-repeat重复某些块的对象？

2 个答案: