Angular版本的评级问题

时间:2018-01-02 18:15:59

标签: angularjs

我尝试使用此http://plnkr.co/edit/gZHBqHjg35f5E9M2Pvib?p=preview

中的角度评分

这是我的Angular代码。

[[3 0 3 3 3 3]
 [3 3 3 1 2 3]
 [3 3 3 0 3 3]
 [2 3 3 3 3 1]]

这是html代码。

var ProfileApp = angular.module('ProfileApp', ['ui.bootstrap']);
ProfileApp.controller('getprofile', function($scope, $http) {
//Some codes are here

})
 ProfileApp.controller('RatingDemoCtrl', function($scope) {
      $scope.myRate = 0;
      $scope.submit = function() {
        console.log($scope.percent); //null
      }
      $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;
      };
    });

不幸的是,我收到了错误:

  

angular.min.js:101错误:[ngRepeat:dupes] http://errors.angularjs.org/1.3.2/ngRepeat/dupes?p0=r%20in%20range&p1=object%3A10&p2=%7B%22stateOn%22%3Anull%2C%22stateOff%22%3Anull%7D

在Plunker中没有错误,但是当我使用代码时,我遇到了错误。没有明星可见。

我做错了什么?

更新:

<div ng-controller="RatingDemoCtrl" class="well well-small">
    <form class="Scroller-Container" ng-submit="submit()"></form>
    <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>

    <pre>{{percent}}</pre>

  </div>

我正在使用上述版本,这就是明星不可见的原因。

http://plnkr.co/edit/vQ9Odm1dAAo8ZJOGHlB7

这是plunker。

1 个答案:

答案 0 :(得分:0)

因为该UI版本的引导程序和Angular 1.3.1不兼容而导致错误

我做了什么,去了https://angular-ui.github.io/bootstrap/ 滚动到RATING, 点击“在plunker中编辑”, 为你保存了Plunker plnkr.co/edit/xNoNfMCKs0HcOcJMhkK2

根据您的需要采用代码并尝试最新的Angular 1.x,或者将其降级为Plunker中您需要的任何内容,如果您遇到任何问题,请在此处询问网址