简体   繁体   中英

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

I am using AngularJS with MVC file structure. 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. Everything works fine if my indicators object has no "chunks" (nest) and I do one ng-repeat through the object. So I have two questions:

  1. Does anyone know the proper way of doing nested ng-repeats in this context?
  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. 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
             }
    }
}       

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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