AngularJS Question

how to make dynamic scope iteration in ng-repeat

i have scope like this in my controller

$scope.chats1 ={user_name:item.user_name,user_photo:item.user_photo}
$scope.chats2 ={user_name:item.user_name,user_photo:item.user_photo}
$scope.chats3 ={user_name:item.user_name,user_photo:item.user_photo}


And this is my currently ng-repeat:

<ul>
<li ng-repeat="x in chats1"></li>
<li ng-repeat="x in chats2"></li>
<li ng-repeat="x in chats3"></li>
</ul>


My question is how to make single ng-repeat that contains all of my scope like this

<ul>
<li ng-repeat="x in chats"> /* defines $scope.chats1,$scope.chats2,$scope.chats3 */
</li>
</ul>


Thank You and i'm really appreciate ur help

Answer Source

Its simple just push your scope objects in an array, call it chats.And repeat on it. The whole code would be:

<!DOCTYPE html>
<html ng-app="hcApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller = "hcAppCtrl">
    chats: {{chats}}
    <br>
    <br>
    <div ng-repeat="data in chats">{{data.user_name}}</div>

<script>
angular.module('hcApp',[])
.controller('hcAppCtrl', ['$scope',function($scope){

  $scope.chats1 ={user_name:"alex",user_photo:"awesome"}
  $scope.chats2 ={user_name:"rumba",user_photo:"damn"}
  $scope.chats3 ={user_name:"sunil",user_photo:"hero"}
  var temp = [];

  temp.push($scope.chats1,$scope.chats2,$scope.chats3);

  $scope.chats =temp;
}]); 
</script>
 </body>
</html>

Here is the working plunker: http://plnkr.co/edit/AByjditVwjJzbcMTkS7T?p=preview