JSFiddle - React, Tailwind, and code Playground

by Ashish Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div ng-controller="ListController as listCtrl">
        <h1>Brands List</h1>
        <table class="table" ng-if="listCtrl.brands.length">
            <thead>
                <th>Name</th>
                <th colspan="2">Type</th>
            </thead>
            <tbody>
                <tr ng-repeat="brand in listCtrl.brands">
                    <td ng-bind="brand.name"></td>
                    <td ng-bind="brand.type"></td>
                    <td class="text-right"><button class="btn glyphicon glyphicon-remove" ng-click="listCtrl.removeBrand($index)"></button></td>
                </tr>
            </tbody>
        </table>
    </div>
	<div ng-controller="FormController as formCtrl">
		<h1>Add Brand</h1>
		<form name="registerForm" ng-submit="formCtrl.submitForm()">            
			<input class="form-control" ng-model="formCtrl.form.name" placeholder="Brand Name" />
			<br />
			<input class="form-control" ng-model="formCtrl.form.type" placeholder="Brand Type" />
			<br />
			<input class="btn btn-success" type="Submit" value="Add Brand" />
		</form>
    </div>
    <!-- {{formCtrl.form | json}} -->
</div>

JavaScript

var app = angular.module("myApp", [])
.controller("FormController", ["$http", "BrandService", function($http, BrandService){
     var ctrl = this;
    
    ctrl.form = {
        name: "",
        type: ""
    };
    
    ctrl.submitForm = function(){
        $http
            .post("/admin.brands/update", ctrl.form)
            .then(function(resp){
                console.log(resp);
                
                // Example to update the brand service
                BrandService.add(ctrl.form);
                ctrl.form = {
                    name: "",
                    type: ""
                };
                // when successfully submitted
                
            }, function(err){
                console.log(err);
                
                // Not supposed to do this here, but just to Example updating the brand service
                BrandService.add(ctrl.form);
                ctrl.form = {
                    name: "",
                    type: ""
                };
                // When got some error
            });
    };
}])
.controller("ListController", ["$http", "BrandService", function($http, BrandService){
    var ctrl = this;
    
    ctrl.brands = BrandService.get();
    ctrl.removeBrand = BrandService.remove;
}])
.factory("BrandService", function(){
    var brandList = [{
        name: "Facebook",
        type: "Social"
    }, {
        name: "Flipkart",
        type: "E-commerce"
    }];
    
    return {
        get: function(){
            return brandList;
        },
        add: function(newBrand){
            brandList.push(newBrand);
        },
        remove: function(index){
            brandList.splice(index, 1);
        }
    };
});

angular.bootstrap(document, ['myApp']);