CODEWITHSUNDEEP
angularjs
WhiteProfileSpecialist
WhiteProfileSpecialist

Reputation: 119

Angularjs ui.bootstrap.rating how to post

I'm trying to build a star rating system with angularjs so after a bit of research i found this http://angular-ui.github.io/bootstrap/ But since i'm absolutely new to angular i can't seem to figure out how to post user selected rating back to the symfony controller.

Html:

<div ng-controller="RatingDemoCtrl">
<rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>
 <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{%verbatim%}{{percent}}%{%endverbatim%}</span>
</div><!-- rating controller end-->

Angular controller:

  tagApp.controller('RatingDemoCtrl', function ($scope, $http) {
  $scope.max = 5;
  $scope.isReadonly = false;

  $scope.hoveringOver = function(value) {
    $scope.overStar = value;
    $scope.percent = 100 * (value / $scope.max);
  };

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

Upvotes: 0

Views: 615

Answers (1)

sylwester
sylwester

Reputation: 16498

You can watch your rate and if user update ration post it to your back end using $http

please see demo below 

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


app.controller('RatingDemoCtrl', function($scope, $http) {
  $scope.max = 5;
  $scope.isReadonly = false;

  $scope.hoveringOver = function(value) {
    $scope.overStar = value;
    $scope.percent = 100 * (value / $scope.max);
  };

  $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.$watch('rate', function(val) {

    function sucess(data) {

      console.log(data);

    };

    function error(response) {

      console.log(response)

      alert("Can't post " + response.data + " Error:" + response.status);

    }



    if (val) {

      var data = {
        rating: val,
        user: "userId" // I'm not sure where is your userId

      }

      $http.post("yourUrl", data).then(sucess, error);


    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>

<body ng-app="app">

  <div ng-controller="RatingDemoCtrl">
    <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>
    <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{%verbatim%}{{percent}}%{%endverbatim%}</span>
  </div>
</body>

Upvotes: 2

Related Questions