JSFiddle - React, Tailwind, and code Playground

by indatawetrust

HTML

<html ng-app="jsAPP">
    <body ng-controller="angularJS">
        <div ekle konu="diller">
             
        </div>
    </body>
</html>

CSS

ul{
    margin:0;
    padding:0;
}

li{
    list-style-type:none;
}

JavaScript

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

app.controller('angularJS',function($scope){
    $scope.diller = ['javascript','php','ruby','perl','c++','golang'];
}).directive('ekle',function(){
    return {
        restrict : 'A',
        link : function(scope,element,attribute){
            var diller = angular.element('<ul>');
            element.append(diller);           
            for(var i=0;i<scope.diller.length;i++){
       var dil = angular.element('<li>').text(scope.diller[i]);
                if(i%2)
                    dil.css({
                        'background-color':'#0af' 
                    });
                else
                    dil.css({
                        'background-color':'#5af'
                    });
                
                diller.append(dil);
            }
        }
    }
});