JSFiddle - React, Tailwind, and code Playground
HTML
<html lang="en" ng-app="theTestApp">
<title>Test App</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<!-- This is for loading separate HTML files into the main HTML file -->
<script src="https://googledrive.com/host/0B52YKjuEE44ySkhPUTBsbW5sSWM/angular-route.js"></script>
<!-- firebase is the backend data storage for the site -->
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src="https://googledrive.com/host/0B52YKjuEE44ySkhPUTBsbW5sSWM/Test_Scripts.js"></script>
<body>
<div>
<div>Click in the input field, and type a key, then data will suddenly appear. I want the data to appear as soon as the STUFF link is clicked.</div>
<ul id="MainTabList">
<li id="SiteName">The Website Name</li>
<li id="MainTab1"><a id="TabLink1" href="#Tab_Home_1">HOME</a>
</li>
<li id="MainTab2"><a id="TabLink2" href="#Tab_Stuff">STUFF</a>
</li>
</ul>
</div>
<div ng-controller="CommonController" ng-init="theSearch.Txt = ' '">
<div>Search:
<input ng-model="theSearch.Txt">
</div>
<div>
<table ng-table="tableParams" show-filter="true" class="table">
<!-- <tr ng-repeat="rows in UsedItems | filter:query | orderBy:orderProp | filter:rows"> -->
<tr ng-repeat="row in UsedItems | filter:theSearch.Txt">
<td>{{row.0}}</td>
<td>{{row.1}}</td>
</tr>
</table>
</div>
</div>
</body>
CSS
#MainTabList li {
display: inline;
padding: 10px list-style-type: none;
text-align: center;
}
#SiteName {
font-size: large;
}
#MainTab1 {
font-size: small;
font-family:Arial Black;
background: transparent;
border: none;
}
#MainTab2 {
font-size: small;
font-family:Arial Black;
background: transparent;
border: none;
}
#TabLink1 {
color:red;
}
#TabLink2 {
color:red;
}
JavaScript
// Hey there! Click the 'UPDATE' button, and hopefully the output will appear.