简体   繁体   English

如何使用ng-repeat重复某些对象?

[英]How can I repeat certain chunks of object with ng-repeat?

I am using AngularJS with MVC file structure. 我正在使用带有MVC文件结构的AngularJS。 I have a data structure in my controller that I want to display on my view. 我的控制器中有一个数据结构,要在视图上显示。 I have a custom "indicators" directive. 我有一个自定义的“指标”指令。 Each "title" belongs to an indicator and I am trying to display a group of four indicator elements at a time. 每个“标题”都属于一个指标,我试图一次显示一组四个指标元素。 I am using nested ng-repeats to display one "chunk" of indicators at a time, but the browser console tells me something is wrong with the syntax of my data structure or doesn't display anything at all. 我正在使用嵌套的ng-repeats一次显示一个“块”指示符,但是浏览器控制台告诉我数据结构的语法有问题或根本不显示任何内容。 Everything works fine if my indicators object has no "chunks" (nest) and I do one ng-repeat through the object. 如果我的指标对象没有“块”(嵌套),并且我对该对象进行了一次ng-repeat,则一切正常。 So I have two questions: 所以我有两个问题:

  1. Does anyone know the proper way of doing nested ng-repeats in this context? 有谁知道在这种情况下嵌套ng-repeats的正确方法?
  2. Is my indicators object syntax wrong? 我的指标对象语法错误吗?

Here is my indicators object in my controller: 这是我的控制器中的指标对象:

$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
         }
    ]}

}];

Here is the part of my view: 这是我观点的一部分:

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

You json/object structure is incorrect. 您的json /对象结构不正确。 It should be: 它应该是:

[{
  "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
    }
  }]
}]

Swapped the [] and {} 交换了[]{}

I fixed it by changing my structure to the following format: 我通过将结构更改为以下格式来修复它:

{
    "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
             }
    }
}       

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM