ng-repeat with i類

<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，追加 3倍，如果它返回1，基於元素的數量只是一個ng-repeat with i類

來源

2016-07-22 user3188649

你爲什麼把周圍'item.Value.Rate'方括號？那是一個整數還是一個列表？ – fodma1

可能的重複[方法ng重複定義的次數而不是重複數組？]（http://stackoverflow.com/questions/16824853/way-to-ng-repeat-defined-number-of-times-而不是重複數組） –

@ fodma1它是整數 – user3188649

這裏是一個指令的定義，我認爲解決了你在有問題的介意，如果你是新的角，我建議你首先檢查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="[email protected]" 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>

來源

2016-07-22 06:37:48 Rachmaninoff

你原來的代碼沒有工作，因爲ng-repeat不能用於愚蠢行爲。 – fodma1

它的工作！謝謝。但是你是什麼意思？對不起，我是新的角 – user3188649

@ fodma1thanks男！ – Rachmaninoff

NG重複重複。我想這裏item.Value.Rate是一個整數。所以它不是一個集合，因此重複不起作用。

你可以做什麼：在第二個div使用

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

，並在你的角度代碼有這樣的：

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

不要忘了，如果你覺得這有助於給予好評！

來源

2016-07-22 06:33:47

你可以試試這個 -

在你的控制器 -

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

來源

2016-07-22 06:35:26

我的課不重複自己。 – user3188649

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

來源

2016-07-22 07:15:59 amit

我已經嘗試過，但仍然無法正常工作。我想要的是，追加 3次： – user3188649

我想重複我的課程。不附加費率的價值 – user3188649

ng-repeat with i類

回答

相關問題