1

angularjsでブートストラップスター評価を実装しました...すべて正常に動作しますが、フォーム送信後に最終的な評価値を取得できません..以下はコードです

 //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>

私は値を設定するためにng-clickを試みましたが、ng-clickがトリガーを取得しませんyはわかりません...誰もこれを以前に行ったことがあります....助けが必要です...

4

4 に答える 4

2

メソッドを追加hoveringLeave します。

固定コードは次のとおりです。

JS

 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>

デモPlunker

于 2013-10-29T08:18:51.057 に答える
1

$scope.overStar を送信すると常に null が返される理由は、html に 'on-leave="overStar = null"' があるため、マウスがその変数 $scope.overStar を離れるたびに null に設定されます。

上記の解決策も正しくありません。マウスを離すときは、ユーザーが評価を選択するときであり、マウスを離すことはクリックとは異なります。そのように設定すると、本当に必要以上の評価が得られます。

于 2014-01-04T15:32:13.293 に答える
0

私は Angular 1.2.* を UI Bootstrap 0.10.0 で使用しており、ng-click はうまく機能します。

HTML:

<rating value="rate" max="5" ng-click="save(rate)"></rating>

コントロール:

$scope.save = function (score) { console.log('Rating: ', score); };
于 2014-01-28T14:34:49.433 に答える
0

別のボタンを追加する代わりに、スコープで $watch over rate を実行して、値が変更されたかどうかを確認することをお勧めします。

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

その場合は、新しい変更を永続化できます。

于 2014-09-16T17:57:26.907 に答える