所以我尝试在我的应用中使用angularjs ui.boostrap评级组件,但我不知道如何从ng-repeat
评级值传递到ratingCtrl
。我尝试过使用ng-init
,但它只返回未定义的错误......有什么想法吗? (数据应通过r.rating传递)
我的模板:
<div class="row">
<div class="col-md-4" id="recipe-list" ng-repeat="r in recipes track by $index">
<a href="show/{{r.recipe.id}}"><img ng-src="{{r.recipe.image}}"></a>
<h4><a href="show/{{r.recipe.id}}">{{r.recipe.name}}</a></h4>
<ul class="list-inline list-ingredients">
<li ng-repeat="ingredient in r.recipe.ingredients">{{ingredient.name}}</li>
</ul>
<div ng-controller="RatingCtrl">
<rating class="rating" ng-style="success" ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" ng-click="setRating(r.recipe.id)"></rating>
</div><!-- rating controller end-->
</div>
</div>
我的控制器:
recipeApp.controller('RatingCtrl', function ($scope, $http) {
$scope.max = 5;
$scope.isReadonly = false;
$scope.ratingStates = [
{stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
{stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
{stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
{stateOn: 'glyphicon-heart'},
{stateOff: 'glyphicon-off'}
];
$scope.setRating = function(id) {
var data = {
rating: $scope.rate,
id: id
};
$http.post('api/rate/recipe', angular.toJson(data), {cache: false})
.success(function(data){
})
.error(function(data){
alert(data.message);
});
};
});