[英]Angular Bootstrap UI rating system - Changing max value using ng-model
I've created a rating system using Angular-UI. 我使用Angular-UI创建了一个评级系统。 The number of stars displayed come from a variable called max.
显示的星数来自一个名为max的变量。 I'm able to show this variable inside an input using ng-model, but once I modify it, it won't change the number of stars.
我能够使用ng-model在输入中显示这个变量,但是一旦我修改它,它就不会改变星数。
You can see what I mean in this Plunker . 你可以在这个Plunker中看到我的意思。
Here's the relevant js: 这是相关的js:
.directive('myRating', function() {
return {
restrict: 'E',
template: '<div> \
<div class="row rating" ng-controller="RatingDemoCtrl"> \
<rating value="rate" max="max" readonly="isReadonly" state-on="\'glyphicon-star rated\'" state-off="\'glyphicon-star\'"></rating> <a class="glyphicon glyphicon-pencil" ng-show="editMode" ng-click="editStars = !editStars"></a>\
<input ng-if="editStars" type="text" class="form-control" ng-model="max" /> \
</div> \
</div>',
replace: true,
};
});
var RatingDemoCtrl = function ($scope) {
$scope.rate = 0;
$scope.max = 10;
$scope.isReadonly = false;
$scope.hoveringOver = function(value) {
$scope.overStar = value;
$scope.percent = 100 * (value / $scope.max);
};
};
The ng-model
is working correctly as it will show the value of max every time, but it won't modify it in real time. ng-model
正常工作,因为它每次都会显示max的值,但不会实时修改它。
Any ideas? 有任何想法吗?
It is totally doable. 这是完全可行的。 Copy down the ui-bootstrap code and alter it a little bit.
复制ui-bootstrap代码并稍微改变它。 I hacked inside and it seems to be working great.
我在里面乱砍,似乎工作得很好。 Check out a working PLUNKER .
看看工作的PLUNKER 。 Here are the changes I made, they can be seen on lines 2493-2559.
以下是我所做的更改,可以在2493-2559行看到。
First I went into the directive and added maxRange as a two-way bound object 首先,我进入指令并将maxRange添加为双向绑定对象
scope: {
value: '=',
onHover: '&',
onLeave: '&',
maxRange: '=max'
},
Then I went into the controller and changed a few things so I could watch the maxRange value and update the objects based on that. 然后我进入控制器并更改了一些内容,以便我可以观察maxRange值并根据它更新对象。
$scope.$watch('maxRange', function() {
$scope.range = createRateObjects(new Array(parseInt($scope.maxRange)));
});
Hacking rocks. 黑客攻击。 Don't be afraid to modify other people's code a little bit if it doesn't fit your needs!
如果它不符合您的需求,请不要害怕修改其他人的代码!
我刚刚快速查看了这个问题,似乎AngularJS Bootstrap Rating指令无法动态更新最大值。
I accidentally found another hack for this: 我不小心发现了另一个黑客:
Wrapping your rating-directive in a ng-if also seems to work. 在ng-if中包含您的评级指令似乎也有效。
<div ng-if="true">
<rating max="myVar"></rating>
</div>
According to the angular documentation, ng-if will reinsert the HTML on each evaluation, triggering a re-evaluation of myVar
. 根据角度文档,ng-if将在每次评估时重新插入HTML,从而触发对
myVar
的重新评估。
Yes, it is still a bit hacky, but I think it is prettier than changing code in your bower_components-folder which will be overwritter on each update. 是的,它仍然有点hacky,但我认为它比更改bower_components文件夹中的代码更漂亮,这将在每次更新时覆盖。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.