我尝试使用此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。
答案 0 :(得分:0)
因为该UI版本的引导程序和Angular 1.3.1不兼容而导致错误
我做了什么,去了https://angular-ui.github.io/bootstrap/ 滚动到RATING, 点击“在plunker中编辑”, 为你保存了Plunker plnkr.co/edit/xNoNfMCKs0HcOcJMhkK2
根据您的需要采用代码并尝试最新的Angular 1.x,或者将其降级为Plunker中您需要的任何内容,如果您遇到任何问题,请在此处询问网址