0
<div class="col-md-4 col-sm-6 col-xs-12 featured" ng-repeat="item in beds">
    <div class="stars"  ng-repeat="t in [item.Value.Rate]">
        <i class="fa fa-star"></i>
    </div>
</div>

This is my code. when i want to use ng-repeat second time, it's not working. i want something like that: if [item.Value.Rate] return 3, append <i class="fa fa-star"></i> 3 times, if it returns 1, just one <i class="fa fa-star"></i>

fodma1
  • 3,485
  • 1
  • 29
  • 49
user3188649
  • 139
  • 1
  • 9
  • why do you put squared brackets around `item.Value.Rate`? Is that an integer or a list? – fodma1 Jul 22 '16 at 06:29
  • Possible duplicate of [Way to ng-repeat defined number of times instead of repeating over array?](http://stackoverflow.com/questions/16824853/way-to-ng-repeat-defined-number-of-times-instead-of-repeating-over-array) – Ali BARIN Jul 22 '16 at 06:38
  • @fodma1 it's integer – user3188649 Jul 22 '16 at 11:13

4 Answers4

1

ng-repeat repeats based on the number of elements. I guess here item.Value.Rate is an integer. So its not a collection and hence the repeat doesn't work.

What you can do: in the second div use

<div class="stars" ng-repeat="t in getCustomRepeatArray(item.Value.Rate)">

and in your angular code have this:

$scope.getCustomRepeatArray(numberValue)
{
     return new Array(numberValue);
}

Don't forget to upvote if you find this helpful!!

Jatin Nath Prusty
  • 557
  • 4
  • 16
1

You can try this -

In your controller -

 $scope.getLength = function(num) {
    return new Array(num);   
  }

And your html - 

<div class="col-md-4 col-sm-6 col-xs-12 featured" ng-repeat="item in beds">
  <div class="stars"  ng-repeat="t in getLength(item.Value.Rate)">
         <i class="fa fa-star"></i>
  </div>
</div>
1

Here is a directive definition which I think solves the problem you had in your mind, If you are new to angular I suggest you to first check the directive docs

Edit:

Use lodash to generate range and use that array in ng-repeat.

var app = angular.module('app', []);

    app.directive('starRating', function () {
        return {
            scope: {
                value: '='
            },
            template: '<div class="stars"><i class="fa fa-star" ng-repeat="r in entries"></i></div>',
            controller: function ($scope) {
                $scope.entries = _.range($scope.value);
            }
        }
    });
app.controller('Ctrl', function($scope) {
  var ctrl = this;
    ctrl.beds = [
      {
        Value: {
          Rate: 5
        }
      },
      {
        Value: {
          Rate: 2
        }
      },
      {
        Value: {
          Rate: 3
        }
      }
    ];
  return ctrl;
});
<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
      </head>
  <body>
    <div ng-controller="Ctrl as ctrl">
    <div class="col-md-4 col-sm-6 col-xs-12 featured" ng-repeat="item in ctrl.beds">
        <star-rating value="item.Value.Rate">
        </star-rating>
    </div>
      </div>
</body>
</html>
fodma1
  • 3,485
  • 1
  • 29
  • 49
Rathma
  • 1,196
  • 2
  • 33
  • 65
0

https://jsfiddle.net/5u5zakub/7/

<div ng-app="myApp" ng-controller="myCtrl">
  <div  ng-repeat="item in beds">
    <div  ng-repeat="t in getArray(item)">
      <i>{{t}}</i>
    </div>
  </div>
</div>


var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.beds = ["1", "2"];
  $scope.getArray = function(num) {
    if (num == "1")
      return ["a","b"];
    else
    return ["c","d"];
  }
});
amit
  • 406
  • 4
  • 6