"ang"
Bootstrap 4.1.1 Snippet by Dom-inus

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div ng-app="MyApp" ng-controller="MyController"> <table cellpadding="0" cellspacing="0"> <tr> <th>Name</th> <th>Quantity</th> <th>Description</th> <th>Price</th> <th></th> </tr> <tbody ng-repeat="m in Customers"> <tr> <td>{{m.Name}}</td> <td>{{m.Quantity}}</td> <td>{{m.Description}}</td> <td>{{m.Price}}</td> <td><input type="button" ng-click="Save($index); saveme=false" value="Save" ng-show="saveme"/> <input type="button" ng-click="Remove($index)" value="Remove" /> <input type="button" ng-click="Modify($index); saveme=true" value="Modify" /></td> </tr> </tbody> <tfoot> <tr> <td><input type="text" ng-model="Customers.Name"/></td> <td><input type="number" ng-model="Customers.Quantity"/></td> <td><input type="text" ng-model="Customers.Description"/></td> <td><input type="number" ng-model="Customers.Price"/></td> <td><input style="display: block; margin-right: auto;margin-left: auto;" type="button" ng-click="Add()" value="Add" /></td> </tr> </tfoot> </table> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> <script> var app = angular.module('MyApp', []) app.controller('MyController', function ($scope, $window) { $scope.Customers = [ { Name: "001", Quantity: "002", Description: "003", Price: "004" } ]; $scope.Add = function () { //Add the new item to the Array. var customer = {}; customer.Name = $scope.Name; customer.Quantity = $scope.Quantity; customer.Description = $scope.Description; customer.Price = $scope.Price; $scope.Customers.push(customer); $scope.Name = ""; $scope.Quantity = ""; $scope.Description = ""; $scope.Price = ""; }; $scope.Remove = function (index) { //Find the record using Index from Array. var name = $scope.Customers[index].Name; if ($window.confirm("Do you want to delete: " + name)) { //Remove the item from Array using Index. $scope.Customers.splice(index, 1); } } $scope.Modify = function (index) { $scope.Customers.selected = angular.copy(index); } $scope.Save = function (index) { $scope.Customers.selected = angular.copy(index); } }); </script> </html>
body{ font-family: Arial; font-size: 10pt; } table{ border: 1px solid #ccc; border-collapse: collapse; } table th{ background-color: #F7F7F7; color: #333; font-weight: bold; } table th, table td{ padding: 5px; border: 1px solid #ccc; }

Related: See More

Rotating CSS Card

Questions / Comments: