JSFiddle - React, Tailwind, and code Playground

by James Harris

HTML

<div ng-app="list" ng-controller="ListController as list">
<ul class="list-group">
	<li ng-repeat="card in cardList" class="list-group-item">
		<input ng-model="card.name" class="card-name">
		<ul class="list-group">
			<li ng-repeat="comment in card.comments" class="list-group-item">{{comment}}</li>
			<li class="list-group-item">
				<form ng-submit="card.addComment(newComment)">
					<input name="comment" placeholder="Add comment" ng-model="newComment.text">
				</form>
			</li>
		</ul>
	</li>
</ul>

<form ng-submit="newCard(name)">
	<label>Name:
		<input placeholder="Card name" autocomplete="off" ng-model="name">
	</label>
</form>
    </div>

CSS

.card-name {
  font-size: 2em;
  border: none;
}

JavaScript

(function() {
	var app = angular.module('list', []);
	app.controller('ListController', ['$scope', function($scope) {
		$scope.cardList = [];
		window.cardList = $scope.cardList;
		$scope.newCard = function(name) {
			var card = {
				name: name,
				priority: null,
				comments: [],
				due: null,
			};
			card.addComment = function(newComment) {
				card.comments.push(newComment.text);
				newComment = {text: ""};
			};
			$scope.cardList.push(card);
			return card;
		};
		$scope.newCard("Test card 1");
		$scope.newCard("Test card 2");
	}]);
})();