JSFiddle - React, Tailwind, and code Playground

by leighboone

HTML

<div ng-app class="row-fluid" ng-controller="formatCtrl">
    <table class="table table-striped">
        <thead>
            <tr>
                <th></th>
                <th>Feature 1</td>
                    <th>Feature 2</th>
                    <th>Feature 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Device</td>
                <td ng-repeat="device in deviceModel()" class=""> <span>
                                    {{device}}
                                </span>

                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label">Which devices?</label>
                </td>
                <td>
                    <label class="checkbox inline">
                        <input ng-model="deviceDesktop" type="checkbox" value="desktop" ng-change="deviceModel()">Device 1</input>
                    </label>
                </td>
                <td>
                    <label class="checkbox inline">
                        <input ng-model="deviceTablet" type="checkbox" ng-change="deviceModel()" value="ipad">Device 1</input>
                    </label>
                </td>
                <td>
                    <label class="checkbox inline">
                        <input ng-model="devicePhone" type="checkbox" ng-change="deviceModel()" value="phone">Device 1</input>
                    </label>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--I know this is a better way but can't seem to get the ng-model to work propperly-->
<!-- <label ng-repeat="device in devices" class="checkbox inline">
                                <input 
                                    type="checkbox"  
                                    value="{{device.category}}" 
                                    ng-change="selectedDevice()" 
                                    ng-model="deviceModel" "device.category"
                         ...

JavaScript

function formatCtrl($scope) {
    $scope.deviceModel = function () {
        var deviceList = ["yes", "yes", "yes"];
        if ($scope.deviceDesktop == true) {
            deviceList.splice(2, 1, "no");
        }
        if ($scope.devicePhone == true) {
            deviceList.splice(1, 1, "no");
            if (deviceList[2] == "yes") {
                deviceList.splice(2, 1, "depends");
            }
        }
        if ($scope.deviceTablet == true) {
            if (deviceList[1] == "yes") {
                deviceList.splice(1, 1, "depends");
            }
        };
        return deviceList
    }
}