JSFiddle - React, Tailwind, and code Playground

by oterox

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.angularjs.org/1.0.7/angular.js"></script>


<div ng-app="gcEventRegistration">

  <div ng-controller="ActivitiesCtrl" class="activities">
  <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
    <div ng-repeat="act in activities">
     <input type="checkbox" name="act-{{act.id}}" data-act="{{act.id}}" value="{{act.id}}" data-price="{{act.price}}" data-title="{{act.title}}">
     <label for="act-{{act.id}}">{{act.title}}</label>
     <br>
    </div>
    
       
  </div>
</div>

JavaScript

var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
    { id: 1, title: "Event Registration", price: "20.00"},
    { id: 2, title: "Weather Talk", price: "35.00"}
]));


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

function ActivitiesCtrl($scope, $http) {

    $scope.activities = [];

    $scope.loadActivity = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockDataForThisTest

        }).success(function(data, status) {
            $scope.activities = data;
        });

    };

}