angularjs - angular star rating directive with no star filled -
how modify angular star rating directive display no star filled (by default) on load? following directive same:
responsecontroller.directive('starrating', function(){ return { restrict: 'ea', template: '<ul class="star-rating" ng-class="{readonly: readonly}">' + ' <li ng-repeat="star in stars" class="star" ng-class="{filled: star.filled}" ng-click="toggle($index)">' + ' <i class="fa fa-star"></i>' + ' </li>' + '</ul>', scope: { ratingvalue: '=ngmodel', max: '=?', onratingselect: '&?', readonly: '=?' }, link: function(scope, element, attributes) { if (scope.max == undefined) { scope.max = 5; } function updatestars() { scope.stars = []; (var = 0; < scope.max; i++) { scope.stars.push({ filled: < scope.ratingvalue }); } }; scope.toggle = function(index) { if (scope.readonly == undefined || scope.readonly === false) { scope.ratingvalue = index + 1; } }; scope.$watch('ratingvalue', function(oldvalue, newvalue) { if (newvalue) { updatestars(); } }); } }; });
you can add updatestars(); before $scope.watch(...). render not filled stars. afterwards if value of ratingvalue not undefined, watcher update stars.
Comments
Post a Comment