JSFiddle - React, Tailwind, and code Playground

by Kaushik Parmar

HTML

<div ng-app="myApp">
    <ul ng-controller="fruitController" class="nav">
        <input type="text" value="ItemName" ng-model="newItemName"
        placeholder="name of new item...">
            <button ng-click="addItem()">Add Me</button>
        <li ng-repeat="item in items.data" id="item{{item.id}}">
            <a href="#">{{item.title}}</a><a ng-click="deleteItem($index)" class="delete-item">x</a>
        </li>
    </ul>
</div>

CSS

a {
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: #333;
}
.nav {
    list-style-type: none;
}
.nav > li {
    border: 1px solid #2987A3;
    background-color: #7ED3ED;
    padding: 3px;
    margin: 3px;
    width: 150px;
}
.nav > li:hover {
    background-color: #B1FAFA;
    color: #fff;
}
.delete-item {
    float: right;
    margin-right: 2px;
    color: #fff;
    padding: 2px 6px;
    background-color: #FC6A6A;
    border-radius: 100%;
}

JavaScript

var myApp = angular.module("myApp", []);
myApp.factory("items", function () {
    var items = {};
    items.data = [{
        id: "1",
        title: "Mango"
    }, {
        id: "2",
        title: "Orange"
    }, {
        id: "3",
        title: "Graphes"
    }, {
        id: "4",
        title: "Pineapple"
    }];
    return items;
});

function fruitController($scope, items) {
    $scope.items = items;

    $scope.deleteItem = function (index) {
        items.data.splice(index, 1);
    }
    $scope.addItem = function (index) {
        items.data.push({
            id: $scope.items.data.length + 1,
            title: $scope.newItemName
        });
        $scope.newItemName = "";
    }
}