AngularJS Radio Buttons Binding

Radio Binding

by megaadriano

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true&amp;libraries=places"></script>
<div ng-controller="ControllerFirst" style="">

  <div  class="Stars" style="--rating: {{cadastro.AVALIACAO_USUARIO}};ack" aria-label="Rating of this product is 2.3 out of 5." ng-click="alteraAvaliacao($event)"></div>
   {{cadastro.AVALIACAO_USUARIO}}
</div>

CSS

@charset "UTF-8";
:root {
  --star-size: 60px;
  --star-color:#b1b3b1;
  --star-background: #fc0;
}

.Stars {
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: 25px;
  font-family: Times;
  line-height: 1;
}
.Stars::before {
  content: '★★★★★';
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



* {
  position: relative;
  box-sizing: border-box;
}

JavaScript

angular.module('myApp', [])
.controller('ControllerFirst',function($scope){
  $scope.cadastro= {AVALIACAO_USUARIO:4};
  $scope.alteraAvaliacao = function(event){
   var x = event.x;
    var y = event.y;
    var offsetX = event.offsetX;
    var offsetY = event.offsetY;
  	console.log(offsetX);
    $scope.cadastro.AVALIACAO_USUARIO = parseInt((offsetX/event.target.offsetWidth)*5)+1;
    if( $scope.cadastro.AVALIACAO_USUARIO> 4)
     $scope.cadastro.AVALIACAO_USUARIO =5;
  	console.log((offsetX/event.target.offsetWidth));
    //alert(offsetX)
  }
  $scope.item = {
      exportsCat: 'D'
  };
});