Javascript AngularJs bootstrap表单提交后如何获取评级值？_Javascript_Angularjs_Angular Ui Bootstrap

Javascript AngularJs bootstrap表单提交后如何获取评级值？

javascript angularjs

Javascript AngularJs bootstrap表单提交后如何获取评级值？,javascript,angularjs,angular-ui-bootstrap,Javascript,Angularjs,Angular Ui Bootstrap,我已经在angularjs中实现了bootstrap明星评级…一切正常，但在表单提交后无法获得最终评级值。下面是代码 //enter code here js angular.module('plunker', ['ui.bootstrap']); var RatingDemoCtrl = function ($scope) { $scope.submit = function() { console.log($scope.overStar) ; //giv

我已经在angularjs中实现了bootstrap明星评级…一切正常，但在表单提交后无法获得最终评级值。下面是代码

 //enter code here js 
 angular.module('plunker', ['ui.bootstrap']);

var RatingDemoCtrl = function ($scope) {

     $scope.submit = function() {
         console.log($scope.overStar) ; //giving always null
     }

     $scope.rate = 1;
     $scope.max = 5;
     $scope.isReadonly = false;

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

enter code here html


 <!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

</head>
<body>
<div ng-controller="RatingDemoCtrl" class="well well-small">
<form class="Scroller-Container" ng-submit="submit()" >

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

</div>
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>

//在这里输入代码
angular.module（'plunker'，['ui.bootstrap']）；
var RatingDemoCtrl=函数（$scope）{
$scope.submit=函数（）{
console.log（$scope.overStar）；//始终为null
}
$scope.rate=1；
$scope.max=5；
$scope.isReadonly=false；
$scope.hoveringOver=函数（值、对象）{
$scope.overStar=值；
$scope.percent=100*（值/$scope.max）；
};
};
在这里输入代码
{{percent}}}%

我尝试了ng click设置值，但ng click未触发不知道y…以前有人这样做过。。。。需要帮助…

添加

hoveringLeave

方法

下面是固定代码：

 angular.module('plunker', ['ui.bootstrap']);

var RatingDemoCtrl = function ($scope) {

    $scope.myRate = 0;

     $scope.submit = function() {
         console.log($scope.percent) ; 
     }

     $scope.rate = 1;
     $scope.max = 5;
     $scope.isReadonly = false;
     $scope.percent = 20;

      $scope.hoveringOver = function(value,object) {
        console.log('hoveringOver', value);
        $scope.overStar = value;
        $scope.percent = (100 * $scope.overStar) / $scope.max;
      };

       $scope.hoveringLeave = function(rate) {
         console.log('hoveringLeave',  $scope.rate);

       $scope.percent = (100 * $scope.rate) / $scope.max;
      };
    };

HTML

<form class="Scroller-Container" ng-submit="submit()" >
    <rating  value="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="hoveringLeave(rate)" ></rating>
    <span class="badge" ng-class="{'badge-warning': percent<30, 'badge-info': percent>=30 && percent<70, 'badge-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>

<input type="submit" id="submit" value="Submit" />
</form>


{{percent}}}%

演示

提交$scope.overStar始终返回null的原因是html中有“on leave=”overStar=null“，因此每次鼠标离开变量$scope.overStar时都将设置为null

上述解决方案也不正确，您假设当鼠标离开时是用户选择评级的时候，鼠标离开并不等于单击。如果这样设置，您将获得比实际需要更多的收视率。

我正在使用Angular 1.2.*UI引导0.10.0和ng click works fab for me:

HTML:

我建议不要添加另一个按钮，您可以在范围中执行$watchoverrate并检查值是否已更改

$scope.$watch('rate', function(newValue, oldValue) {
    if(newValue!==oldValue){
        alert(newValue+' '+oldValue);
    }
});

如果出现这种情况，您可以保留新的更改

$scope.save = function (score) { console.log('Rating: ', score); };

$scope.$watch('rate', function(newValue, oldValue) {
    if(newValue!==oldValue){
        alert(newValue+' '+oldValue);
    }
});