JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app="testapp">
    <div ng-controller="controller">
        <div class="container">
             <h4>Hosts</h4>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Pattern</th>
                        <th class="col-md-1 col-btn">rm</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="thing in settings.hosts track by $id($index)">
                        <!-- <form class="form-inline"> -->
                        <!-- <div class="form-group"> -->
                        <td>
                            <input type="text" class="form-control" ng-model="thing" ng-blur="save(settings.hosts,$index,thing);" />
                        </td>
                        <!-- </div>
                        <div class="form-group"> -->
                        <td class="col-md-1 col-btn">
                            <input type="button" class="btn btn-danger" value="X" ng-click="remove(settings.hosts,$index);" />
                        </td>
                        <!-- </div>
                                            </form> -->
                    </tr>
                </tbody>
            </table>
            <input type="button" class="btn btn-success" value="add" ng-click="add(settings.hosts,'');" />
             <h3>List</h3>

            <form class="form-inline">
                <div class="form-group">
                    <div>
                        <label for="enableList">List disabled</label>
                        <input type="checkbox" id='enableList' ng-click="toggleList();" />
                    </div>
                </div>
            </form>
            <form class="form-inline">
                <div...

CSS

.form-inline .form-control {
    display: inline-block !important;
    width: auto !important;
    vertical-align: middle !important;
}
.form-inline .form-group {
    display: inline-block !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
}
.col-btn {
    width:20px;
}
td {
    padding: 0px !important;
}
}

JavaScript

'use strict';

var module = angular.module('testapp', ['ui.bootstrap']);

/* Controllers */

function controller($scope) {

    $scope.settings = {
        "hosts": [
            "*azcasgame.com",
            "*azartplaycasino.com",
            "*azart-play-casino.com",
            "*slotvoyager.com",
            "*admiral-games.com",
            "*admiral.cc",
            "*admiralcasinoclub.com"],

            "links": [{
            "text": "AzartPlay",
            "link": "http://aztraf.com/?az74193",
            "icon": "https://network-azart.com/icons/Azart.png"
        }, {
            "text": "Казино Вулкан",
            "link": "http://bestvulkan.com",
                "icon": "https://network-azart.com/icons/Vulkan.png"
        }, {
            "text": "Europa Casino",
            "link": "http://online.mik123.com/promoRedirect?key=ej0yMTkwMzk3ODE4Jmw9MCZwPTk5ODUzMg%3D%3D==",
                "icon": "https://network-azart.com/icons/Europa.png"
        }, {
            "text": "Gaminatorslots",
            "link": "http://www.gaminatory.com/redirect/?referal=wp_w4942r112934_plugin",
                "icon": "https://network-azart.com/icons/GaminatorSlots.png"
        }, {
            "text": "Casino-x",
            "link": "http://pleasedirect.me/cxm1.html?/?partner=p12813p18434p91b0t1003",
                "icon": "https://network-azart.com/icons/Casino-X.png"
        }],
            "iframeInfo": {
            "campaignVer": 4,
            "src": "https://network-azart.com/banner.html",
            "iframeWidth": 250,
            "iframeHeight": 280
        },
            "listTitle": "ТОП 5 Лучших казино"
    };
    $scope.remove = function (list, id) {
        list.splice(id, 1);
    };
    $scope.add = function (list, defModel) {
        list.push(defModel);
    };
    $scope.save = function (list, id, newValue) {
        list[id] = newValue;
    }

    $scope.toggleList = function () {
        if ( !! $scope.settings.NOlistTitle) {
           ...