JSFiddle - React, Tailwind, and code Playground

by dirkjot

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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">{{item.title}} ({{item.id}})
                        <div ng-show="toggle[item.id]">
                            <p>{{item.content}}</p>
                            <span class="glyphicon glyphicon-pencil" ng-click="goedit(item.id)"></span>
                            <span class="glyphicon glyphicon-trash"></span>
                        </div>

                    </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>

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(myvar) {
		//console.log($scope.toggle[myvar]);
		for (var key in $scope.toggle) {
            if (key != myvar) { 
			$scope.toggle[key] = false; }}
		$scope.toggle[myvar] = !$scope.toggle[myvar] ;};
    
})