Question

<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>

这是我的代码。当我想第二次使用ng-repeat时，它不起作用。我想要这样的东西：如果[item.Value.Rate]返回3，则追加<i class="fa fa-star"></i> 3次，如果它返回1，则只追加<i class="fa fa-star"></i>

Answer 1

ng-repeat基于元素数量重复。我猜这里的item.Value.Rate是一个整数。所以它不是一个集合，因此重复不起作用。

你能做什么：在第二个div使用

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

并且在你的角度代码中有这个：

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

如果你觉得这很有帮助，别忘了upvote !!

Answer 2

你可以试试这个 -

在你的控制器中 -

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

和你的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>

Answer 3

这是一个指令定义，我认为这个定义可以解决你脑海中的问题。如果你是角色的新手我建议你先检查directive docs

修改

使用lodash to generate range并在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>

Answer 4

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"];
  }
});

用i类重复ng-repeat

4 个答案: