Simple jQuery Star Rating and AngularJs (ng-repeat)

Question

Oh boy oh boy

I want to use this plugin http://www.jqueryscript.net/other/Simple-jQuery-Star-Rating-System-For-Bootstrap-3.html along with angular ones.

While I use JSON, which is initialized when I first load the page, it works. When I modify or even add elements to an array, the star system no longer works. It took me a while to go this far to find the error, but I can’t decide.

This is what it looks like when I click on new items.

When I looked at the Google Chrome elements, I saw that there wasn’t a bunch of code in the new generated star ratings.

Generated on first page load

<div class="star-rating rating-md rating-active"><div class="clear-rating clear-rating-active" title="Clear"><i class="glyphicon glyphicon-minus-sign"></i></div><div class="rating-container rating-gly-star" data-content=""><div class="rating-stars" data-content="" style="width: 142px;"></div><input value="4" type="number" class="rating form-control hide" min="0" max="5" step="0.5"></div><div class="caption"><span class="label label-primary">Four Stars</span></div></div> 

After clicking the button to enter new elements, the new code is as follows:

 <input value="4" type="number" class="rating" min="0" max="5" step="0.5"> 

html code

  <div ng-repeat="x in allRecords" > <input id="input-21d" value="4" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm"> </div> 

Controller initialization

Edi: My controller and module are configured like this, please think about it if you answer :)

 var myApp = angular.module('myApp', ['ngAnimate']) myApp.controller("ContactController", function ($scope, $sce, $http, $timeout) { $scope.allRecords = [ { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" }, { "Name" : "Berglunds snabbköp", "City" : "Luleå", "Country" : "Sweden" }, { "Name" : "Magazzini Alimentari Riuniti", "City" : "Bergamo", "Country" : "Italy" }, { "Name" : "Wolski Zajazd", "City" : "Warszawa", "Country" : "Poland" } ] ; $scope.addElements= function() { var obj = { Name: 'Hello world!' }; $scope.allRecords.push(obj); }; }); 

SOLUTION After adding new elements, I simply reloaded star-rating.js

  $(function() { function load_script() { $('#myscript').remove(); $.getScript("js/star-rating.js?s=", function() { $('script:last').attr('id', 'myscript'); }); } load_script(); }); 

I think this is not the best way, but so far I do not know how to do this. And since star-rating.js is only 22kb big, there should be no later performance issues.

Edit 2 I switched to this star rating. http://rateit.codeplex.com/

But the "update" problem remains, which means that I have to reload .js in this case "jquery.rateit.js". I can live with it, if I have more time and patience, I will do it better: D

Answer 1

every time you add a new object, angularjs just add a new input element that jquery-rating does not know about it, for integration with angularjs you need to create a new directive, for example:

 var myApp = angular.module('myApp', ['ngAnimate']); myApp.controller("ContactController", function ($scope, $sce, $http, $timeout) { $scope.allRecords = [ { "Name": "Alfreds Futterkiste", "City": "Berlin", "Country": "Germany" }, { "Name": "Berglunds snabbköp", "City": "Luleå", "Country": "Sweden" }, { "Name": "Magazzini Alimentari Riuniti", "City": "Bergamo", "Country": "Italy" }, { "Name": "Wolski Zajazd", "City": "Warszawa", "Country": "Poland" } ]; $scope.addElements = function () { var obj = { Name: 'Hello world!' }; $scope.allRecords.push(obj); } }).directive('myStart', function () { return function (scope, element, attrs) { $(element).rating(); }; }); 

and their html (remove class rating, so jquery-rating does not automatically create Rating ):

 <div ng-app="App1" ng-controller="Controller1"> <input ng-repeat="x in allRecords" my-start id="rating-system" type="number" min="1" max="5" step="1"> <button ng-click="addElements()">Click me</button> 

therefore, each time an input tag is created, we will call $ .rating to apply to this new input.