JSFiddle - React, Tailwind, and code Playground

by dirkjot

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body ng-app="index">
    <div class="container">
         <h1>Adding and removing items</h1>

        <div ng-controller="home" ng-cloak class="ng-cloak">
            <div class="list-group">
                <div ng-repeat="item in listofitems">
                    <div class="list-group-item row">
                        <div class="col-md-6">
                            {{item.title}} ({{item.id}})
                        </div>
                    </div>
                </div>
            </div>
            <b>Buttons:</b>
            <div ng-click="listofitems.pop()">
                  Remove one</div>
            <div ng-click="listofitems.splice(1,0,
                                 {'id':99,'title':'new item'})">
                  Add a new one</div>
        </div>
    </div>
</body>

JavaScript

angular.module('index', []).controller('home', function ($scope, $http) {
    $scope.listofitems = [{
        "id": 1,
        "title": "Jack",
        "content": "Bauer lorem ipsum and a very long story indeed. Bauer lorem ipsum and a very long story indeed.  Bauer lorem ipsum and a very long story indeed.  Bauer lorem ipsum and a very long story indeed. ",
        "done": "no"
    }, {
        "id": 2,
        "title": "Chloe",
        "content": "O'Brian",
        "done": "no"
    }, {
        "id": 3,
        "title": "Kim",
        "content": "Bauer",
        "done": "no"
    }, {
        "id": 4,
        "title": "David",
        "content": "Palmer",
        "done": "no"
    }, {
        "id": 5,
        "title": "Michelle",
        "content": "Dessler",
        "done": "no"
    }];


})