JSFiddle - React, Tailwind, and code Playground

by gedave

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap-tooltip.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap-modal.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap-popover.min.js"></script>

<span>Table One</span>

<div ng-controller="checkBoxCtrl">
    <table width="400" border="1">
        <tr ng-repeat="data in tableOne" id="item{{data.key}}">
            <td width="20px">
                <input type="checkbox" ng-model="data.checked">
            </td>
            <td>{{data.key}}</td>
            <td>{{data.value}}</td>
        </tr>
    </table>
    <br>
<span>Table Two</span>

    <table width="400" border="1">
        <tr ng-repeat="data in tableOne | filter: data.checked==true">
            <td>{{data.key}}</td>
            <td>{{data.value}}</td>
        </tr>
    </table>

JavaScript

var app = angular.module('myApp', []);

function checkBoxCtrl($scope){
	$scope.tableOne=[
					{key: '1',	value: 'a'},
					{key: '2',	value: 'b'},
					{key: '3',	value: 'c'},
					{key: '4',	value: 'd'}
					];	
					
	
	};