simple rendering angularjs scope data in the view

Question

inside angularjs controller I have some dummy data

$scope.someData = {
        "A": "AAAA",
        "B": "BBBB",
        "C": "CCCC"
};

from my view (which is bounded to the route which calls above controller)

<li class="animate-repeat" ng-repeat="data in someData">
    {{data.A}} | {{data.B}} | {{data.C}}    
</li>

I'm getting rendered view

| | |

but when I look with batarang chrome extension I am able to see this scope data trough this plugin

Models for (4)
 { 
    data: AAAA
 } 
Models for (5)
 { 
    data: BBBB
 } 
Models for (6)
 { 
    data: CCCC
 }

JimL · Accepted Answer · 2014-11-20 21:08:05Z

1

You iterate over an object, not an array. So inside the ng-repeat scope you have "data" which then holds the value of each iteration (AAAA, BBBB, CCCC). You should probably change the dummy data to be an array with one object.

function MyCtrl($scope) {
    $scope.someData = [{
        "A": "AAAA",
        "B": "BBBB",
        "C": "CCCC"
    }];
}

<div ng-controller="MyCtrl">
  <li class="animate-repeat" ng-repeat="data in someData">
    {{data.A}} | {{data.B}} | {{data.C}}    
  </li>
</div>

Output:

AAAA | BBBB | CCCC

answered Nov 20, 2014 at 21:08

JimL

2,5411 gold badge20 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Walter Brand · Accepted Answer · 2014-11-20 21:09:59Z

1

Probably this will lead to the desired solution:

<li class="animate-repeat" ng-repeat="(key,value) in someData" >
{{key}} | {{value}}   
</li>

answered Nov 20, 2014 at 21:09

Walter Brand

6893 silver badges10 bronze badges

Collectives™ on Stack Overflow

simple rendering angularjs scope data in the view

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related