JSFiddle - React, Tailwind, and code Playground

by rur_d

HTML

<script type="text/javascript" ng:autobind
        src="http://code.angularjs.org/0.9.17/angular-0.9.17.js"></script>

<div ng:controller="FormController" id="friend-form" >
    <h3 class="spaceAfter">Send to a Friend TEST</h3>
    <label for="info.game">Game:</label> <input type="text" name="info.match" ng:required class="spaceAfter"/><br/>
    <label for="info.pub">Pub:</label> <input type="text" name="info.pub" ng:required class="spaceAfter"/><br/>
    <label for="info.time">Time:</label> <input type="text" name="info.time" ng:required class="spaceAfter"/><br/>
    <label>Friends:</label>[ <a href="" ng:click="info.friends.$add()">add</a> ] <br/>
        <div ng:repeat="friend in info.friends">
          <input type="text" name="friend.name" ng:required/>    
          <input type="text" name="friend.email" ng:required ng:validate="email" />
           [ <a href="" ng:click="info.friends.$remove(friend)">X</a> ]
        </div>
    
    
    <button ng:click="sendToFriends()">Send to Friend</button>
    
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="debug">
        <p>Debug:<br/> <code>{{info | json}}</code></p>
    </div>
</div>

CSS

.spaceAfter {
    margin-bottom: 20px;
}

#debug {
    background-color : #eaeaea;
    padding : 10px;
    color : #666666;
    font-weigth:  bold;
}

JavaScript

function FormController( $window, $invalidWidgets ) {
        this.window = $window;
        
        this.info = { match:"Ireland v France, 25th March",
                      pub:"The Oarsman",
                      time:"8pm",
                      friends:[
                      {name:"Ruaidhri Devery", email:"[email protected]"}
                      ]
                  };
    }

    FormController.prototype.sendToFriends = function() {
        var loc = "process.php?v=1";
        var info = this.info;

        for(var i=0, len = info.friends.length, friend; i<len;i++){
            friend = info.friends[i];
            loc += "&names[]="+friend.name;
            loc += "&emails[]="+friend.email;    
        }
                    
        loc += "&game="+info.game;
        loc += "&pub="+info.pub;
        loc += "&time="+info.time
        loc += "&action=sendtofriend";
        
        this.window.location = loc;
    }