简体   繁体   中英

ng-repeat is not working

I have an array like this ["2017-03-09 ": Array[6], "2017-03-10 ": Array[2]]

while doing ng-repeat it is not working:

<div ng-repeat="total in sortedOrders">
    <div class="col-75">{{total.id}}</div>
</div>

fiidle demo and

consoled image of array

Please help.

["2017-03-09 ": Array[6], "2017-03-10 ": Array[2]] is not the syntax for an array.

An array is a series of comma-separated values, like this:

['one', 'two', 'three']

You should use an object instead if you would like to store a series of key-value pairs:

{
   one: 1,
   two: 2,
   three: 3
}

You have to use two ng-repeat for this object as you have arrays inside object and these array contains objects too. So first ng-repeat walk through all outer values of object and this value is an array so inner loop traverses through this array for each object and put the id value of the object into the div.

   <div ng-repeat="inner in sortedOrders">
       <div ng-repeat="total in inner">
          <div class="col-75">{{total.id}}</div>
       </div>
    </div>

You have array inside of an array, what I got from your consoled image. For that, you have to use two ng-repeat loops, if you want to show all the elements.

I suposse you are creating array like this: `

var specialArray = [];
  // assigning values to corresponding keys
  specialArray["Main"] = [{id:1}];
  specialArray["Guide"] = [{id:2},{id:3}];

`

but that is not recognized by angular template (check my plunker). Try using plain object instead (also example in plunker).

In your JSFidlle change:

$scope.sortedOrders= []; 
    to 
$scope.sortedOrders= {};

and use:

<div ng-repeat="(d,value) in sortedOrders">
     {{value}}
   </div>

Example: Plunker

Edit in your plunker like:

<div ng-app>
  <h2></h2>
  <div ng-controller="TodoCtrl">
   <div ng-repeat="d in sortedOrders">
     <div ng-repeat="(f,value) in d">
     {{value.id}}
     </div>
   </div>
</div>

and

$scope.sortedOrders=[]; to $scope.sortedOrders={};

You will get your ID Printed in the HTML page

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