JSFiddle - React, Tailwind, and code Playground

by igor23

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div ng-app="purchaseApp">
<div ng-controller="purchaseController">
    <div class="page-header">
        <h1>My list</h1>
    </div>
    <div class="panel">
        <div class="form-inline">
            <div class="form-group">
                <div class="col-md-8">
                    <input class="form-control" ng-model="text" placeholder="Name">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-6">
                    <input type="number" class="form-control" ng-model="price" placeholder="Price">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-8">
                    <button class="btn btn-default" ng-click="addItem(text,price)">Add</button>
                </div>
            </div>
        </div>
    </div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Item</th>
                <th>Price</th>
                <th>Done</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in list.items">
                <td>{{item.purchase}}</td>
                <td>{{item.price}}</td>
                <td><input type="checkbox" ng-model="item.done"></td>
                <td><button class="btn btn-default" ng-click="deleteItem()">Delete</button></td>
            </tr>
        </tbody>
    </table>
</div>
</div>

JavaScript

var model = {
    items: [
        { purchase: "Хлеб", done: false, price: 15.9 },
        { purchase: "Масло", done: false, price: 60 },
        { purchase: "Картофель", done: true, price: 22.6 },
        { purchase: "Сыр", done: false, price:310 }
    ]
};
var purchaseApp = angular.module("purchaseApp", []);
    purchaseApp.controller("purchaseController", function ($scope) {
    $scope.list = model;
    $scope.addItem = function (text, price) {
        price = parseFloat(price);
        if(text != "" && !isNaN(price)) {
            $scope.list.items.push({ purchase: text, price: price, done: false });
        }
    }
    $scope.deleteItem = function() {
        console.log('delete')
    }
});