CODEWITHSUNDEEP
angularjs
Ranjith Kumar
Ranjith Kumar

Reputation: 17

binding 3 arrays data using angular js

I'm binding the array data using reference $index but i'm getting arrays in group2 and value

I need like this:

grp1
abc,def
value1,value2

grp2
adf,cdf
value3,value4

But Im getting :

grp1
["abc","def"]
[["value1","value2"]]
grp2
["adf","cdf"]
[["value3","value4"]]

Below code i tried

HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div ng-app ng-controller="ListCtrl" ng-cloak>
  <ul ng-repeat="group in group1">
    <li>{{group}}</li> 
    <li>{{group2[$index]}}</li>
    <li>{{value[$index]}}</li>
  </ul>
</div>
</body>
</html>

Script:

function ListCtrl($scope) {
  $scope.group1 = ['grp1', 'grp2'];
  $scope.group2 = [['abc', 'def'],['adf','cdf']];
  $scope.value = [[['value1','value2']],[['value3','value4']]];  
}

Upvotes: 0

Views: 228

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

Try hardcoded way:

<div ng-controller = "fessCntrl"> 
 <ul ng-repeat="group in group1">
    <li>{{group}}</li> 
    <li>{{group2[$index][0]}} {{group2[$index][1]}}</li>
    <li>{{value[$index][0][0]}} {{value[$index][0][1]}}</li>
  </ul>
</div>

Demo Fiddle

But if you want to invoke controller, I would write:

<div ng-controller = "fessCntrl"> 
 <ul ng-repeat="group in group1">
    <li>{{group}}</li> 
    <li>{{printGroup(group2[$index])}}</li>
    <li>{{printGroup(value[$index])}}</li>
  </ul>
</div>

and method:

$scope.printGroup = function (group) {       
        var buff = '';        
        angular.forEach(group, function(val){
            buff = buff + ' ' + val
        });        
        return buff; 
    };

Demo 2 Fiddle

Upvotes: 1

Related Questions