JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
    <script>
    var isrcorderapp = angular.module('plunker', []);

isrcorderapp.directive("isrcrow", function(){
  return {
    restrict:'A',
    template: '<td><input  ng-model="row.artist"/></td>\
                <td><input ng-model="row.title"/></td>\
                <td><select  ng-model="row.isrctype" ng-change="setState(state)" ng-options="s.type for s in recordingTypes" class="ng-pristine ng-valid"></select></td>\
                <td><input ng-model="row.duration"/></td>\
                <td><input ng-model="row.year"/></td>\
                <td><input type="button" value="Add ISRC" ng-click="AddIsrc()" class="btn btn-small btn-success" />\
                    <input type="button" value="Delete" ng-click="RemoveIsrc(row)" class="btn btn-small btn-danger" />\
                </td>',
    replace: false
  }
});

isrcorderapp.controller("isrcorders", function($scope,$http,$compile) {
    function newItem(){
      return{
        artist:'',
        title:'',
        duration:'',
        year:'',
        isrctype:''
      }
    }
    $scope.recordingTypes = [
        {type:'A'},
        {type:'B'},
        {type:'C'},
        {type:'D'},
        {type:'E'}
        ];
        
     $scope.items=[newItem()] ;  
        
    $scope.AddIsrc = function() {
     $scope.items.push(newItem())
    };
    $scope.RemoveIsrc=function(row){
      var index=$scope.items.indexOf(row);
      $scope.items.splice(index,1)
    }
    
        
});

    </script>
  </head>

  <body...