Angularjs ng-repeat将数据传递给评级控制器

时间:2014-11-21 12:02:01

标签: angularjs

所以我尝试在我的应用中使用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);
            });
    };
});

0 个答案:

没有答案