JSFiddle - React, Tailwind, and code Playground

by JSWorld

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<div ng-controller="AngularCtrl">
  <div my-repeater='{{items}}'></div>
</div>

JavaScript

angular.element(document).ready(function() {
    angular.bootstrap(document, ['myApp']);
});

var myApp = angular.module('myApp', []);

myApp.directive('myRepeater', function($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var myTemplate = "<div ng-click='updateRating({{item}});' ng-class='getRatingClass({{rating}});'>{{rating}}</div>";
                var items = scope.items;
                console.log('length: ' + items.length);
                for (var i = 0; i < items.length; i++) {
                    var child = scope.$new(true);
                    console.log(items[i].ratings);
                    child.item = items[i];
                    child.rating = items[i].ratings;                    
                    var text = $compile(myTemplate)(child);
                    element.append(text);
                }
       }
    };
});

function AngularCtrl($scope) {
    $scope.items = [{
        id: 1,
        ratings: 10},
    {
        id: 2,
        ratings: 20}];
    
    $scope.updateRating = function(item){
        alert('inside update rating');
        item.ratings = item.ratings+1;
    };

    
    $scope.getRatingClass = function(rating){
        alert('inside rating class');
        if(rating > 10){
            return 'important';
        }            
        return 'normal';
    };    
}