JSFiddle - React, Tailwind, and code Playground

by Saloni Sharma

HTML

<!DOCTYPE html>
	<link rel="stylesheet" href="CSS/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
	<script src="JS/main.js"></script>

<body ng-app="MyModule">
	<div ng-controller="MyController as ctrl">
	<h2>Folders</h2>
	<input type="checkbox" ng-model="ctrl.isBoxChecked">Expand All
		<div ng-show="ctrl.isBoxChecked">
			<h2>Folder 1</h2>
			<ul ng-bind="ctrl.fileNamesInList">
				<li>File 1.1</li>
				<li>File 1.2</li>
				<li>File 1.3</li>
			</ul>

			<h2>Folder 2</h2>
			<ul>
				<li>File 2.1</li>
				<li>File 2.2</li>
				<li>File 2.3</li>
			</ul>

			<h2>Folder 3</h2>
			<ul>
				<li>File 3.1</li>
				<li>File 3.2</li>
				<li>File 3.3</li>
			</ul>
		</div>

		<div>
			<span id="fileInputBox">File Name: 
				<input type="text" ng-model="someFileName" placeholder="enter a file name" >
				<button ng-click="ctrl.onUserClick">Add to list</button>
			</span>
		</div>

CSS

#fileInputBox {
	margin-left: 300px;
	position: fixed;
}

JavaScript

var myMod = angular.module("MyModule", []);
myMod.controller("MyController", function() {
	var self = this;

	// Makes checkbox unchecked upon page load
	self.isBoxChecked = false;
	
	// onUserClick fn makes value true for ng-show
	self.onUserClick = function() {
		self.isBoxChecked = !self.isBoxChecked;
		self.someFileName = self.fileNamesInList;
		self.fileNamesInList.push({
			self.someFileName
		})
	};

	// Empty array for file names
	self.fileNamesInList = [];


});