JSFiddle - React, Tailwind, and code Playground
by rushijogle
HTML
<html ng-app='myapp'>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="col-md-6" ng-controller="networkingSetupController">
<label for="httpServer">HTTP Server : </label>
<div class="input-group">
<input type="text" class="form-control" id="addHttpServer" ng-model="addServerNames" />
<div class="input-group-btn setPadding">
<button type="button" class="btn btn-primary btn-md pull-right" ng-click="addHTTPServer()">Add</button>
</div>
</div>
<div class="col-md-12 tableWrapper">
<table class="table table-striped">
<thead>
<tr>
<th>HTTP Server Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="serverName in networkconf.ntp_servers track by $index">
<td ng-bind = "serverName"> </td>
<td> <input type="button" class="btn btn-primary btn-md pull-right" value="delete" ng-click="deleteserverName(serverName)"> </td>
</tr>
</tbody>
</body>
</html>
</table>
</div>
</div>
JavaScript
var myapp = angular.module('myapp',[]);
app.controller('networkingSetupController', function ($scope) {
$scope.pools = [];
$scope.networkconf.ntp_servers = [];
$scope.networkconf.domain_name_servers = [];
$scope.networkconf.http_proxy_servers = [];
$scope.networkconf.https_proxy_servers = [];
$scope.networkconf.networks = [];
$scope.addHTTPServer = function () {
if ($scope.addServerNames != undefined)
$scope.networkconf.ntp_servers.push($scope.addServerNames);
}
});