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>

私は戻って第三スターの3つ星と再びクリックを選択した場合、私は上記のコードを持って、評価はこれがクリックトグル評価値を意味し、0になるところ。とにかく評価値をトグルしたくないです。適切な方法を見つけることができませんでした。これを防ぐ方法はありますか？

出典

2017-05-05 Anonymous

uib-rating | Angular-UI docsによると、それは属性

enable-resetがあります（デフォルト：trueを） - 電流定格のアイコンをクリックすると、0への評価をリセットします。

ちょうどそれをfalseに設定して、あなたはいいですね！ここに実例があります！

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>

出典

2017-05-05 06:48:42 tanmay

Yeahhh。出来た。どうもありがとうございます –

ui.bootstrapのクリックでトグルリングスター評価を停止するには？

答えて

関連する問題