AngularJs引导如何在表单提交后获得评级值？
[英]AngularJs bootstrap how to get rating value after form submit?
问题描述
我已经在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>
我尝试了ng-click来设置值但是ng-click没有得到触发器不知道y ...之前有人做过这个....需要帮助......
4 个解决方案
解决方案1
2 已采纳 2013-10-29 08:18:51
添加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
解决方案2
1 2014-01-04 15:32:13
你提交$ scope.overStar总是返回null的原因是在你的html中你有'on-leave =“overStar = null”'，所以每当你的鼠标离开那个变量时，$ scope.overStar将被设置为null。
以上解决方案也不正确，你假设当鼠标离开时是用户选择评级的时间，鼠标离开不等于点击。 如果你这样设置，你将获得比你真正需要的更多的评级。
解决方案3
0 2014-01-28 14:34:49
我正在使用Angular 1.2。*与UI Bootstrap 0.10.0和ng-click工作为我工作：
HTML：
<rating value="rate" max="5" ng-click="save(rate)"></rating>
按Ctrl：
$scope.save = function (score) { console.log('Rating: ', score); };
解决方案4
0 2014-09-16 17:57:26
我建议不要添加另一个按钮，你可以在范围内进行$ watch over rate并检查值是否已经改变。
$scope.$watch('rate', function(newValue, oldValue) {
if(newValue!==oldValue){
alert(newValue+' '+oldValue);
}
});
如果发生这种情况，你可以坚持新的变化。
表单提交后如何获得返回值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.