Comment arrêter de changer la note des étoiles sur click in ui.bootstrap?

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) { 
 
    $scope.rate = 7; 
 
    $scope.max = 10; 
 
    $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'} 
 
    ]; 
 
});

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
 
    <script src="example.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="RatingDemoCtrl"> 
 
    <h4>Default</h4> 
 
    <span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span> 
 
    <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span> 
 

 
    <pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre> 
 

 
    
 

 
    
 
</div> 
 
    </body> 
 
</html>

Je l'extrait de code de code ci-dessus où si je sélectionne 3 étoiles et encore cliquez de nouveau sur la 3ème étoile, note devient 0. Cela signifie valeur clic permet de basculer de notation. Je ne veux pas que la valeur d'évaluation bascule quand même. Impossible de trouver le bon chemin. Un moyen d'empêcher cela?

Source

2017-05-05 Anonymous

Selon uib-rating | Angular-UI docs, il a un attribut

enable-reset: (par défaut: true) - En cliquant sur l'icône de la note actuelle réinitialisera la cote à 0.

Il suffit de mettre cela à false et vous êtes prêt à partir! Voici un exemple de travail!

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function($scope) { 
 
    $scope.rate = 7; 
 
    $scope.max = 10; 
 
    $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' 
 
    } 
 
    ]; 
 
});

<html ng-app="ui.bootstrap.demo"> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
 
    <script src="example.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="RatingDemoCtrl"> 
 
    <h4>Default</h4> 
 
    <span uib-rating ng-model="rate" max="max" enable-reset="false" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span> 
 
    <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span> 
 

 
    <pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre> 
 

 
    </div> 
 
</body> 
 

 
</html>

Source

2017-05-05 06:48:42 tanmay

Yeahhh. Ça a marché. Merci beaucoup –

Comment arrêter de changer la note des étoiles sur click in ui.bootstrap?

Répondre

Questions connexes