JSFiddle - React, Tailwind, and code Playground

by dirkjot

HTML

<body ng-app="index">
<div class="container">
    <h1>My TODO list</h1>

    <div ng-controller="home" ng-cloak class="ng-cloak">
        <div class="list-group">
            <div ng-repeat="item in listofitems">
                <div class="list-group-item row">
                    <div ng-click="toggleCustom(item.id)" class="col-md-6"><span class="sdtitle">{{item.title}}</span> ({{item.id}})</div><div class="content">
                        <p ng-show="toggle[item.id]">{{item.content}}</p>
                    </div>
                    <form name="form{{item.id}}">
                        <div class="col-md-6">Done
                            <input type="checkbox" ng-model="item.done"
                                   ng-true-value="'yes'" ng-false-value="'no'"
                                   ng-click='onDoneClick(item)'>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

</div>
</body>

CSS

.sdtitle {
    font-weight: bold;
}

JavaScript

angular.module('index', []).controller('home', function ($scope, $http) {
        $scope.listofitems = [{"id":1,"title":"Jack","content":"Bauer lorem ipsum and a very long story indeed. Bauer lorem ipsum and a very long story indeed.  Bauer lorem ipsum and a very long story indeed.  Bauer lorem ipsum and a very long story indeed. ","done":"no"},{"id":2,"title":"Chloe","content":"O'Brian","done":"no"},{"id":3,"title":"Kim","content":"Bauer","done":"no"},{"id":4,"title":"David","content":"Palmer","done":"no"},{"id":5,"title":"Michelle","content":"Dessler","done":"no"}];
    
	$scope.toggle = [];
	$scope.toggleCustom = function(itemid) {
		for (var key in $scope.toggle) {
			$scope.toggle[key] = false; }
		$scope.toggle[itemid] = $scope.toggle[itemid] === true ? false : true;};
    
})