Angular Bootstrap Tabs
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.11.2/select.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.11.2/select.css">
<div ng-app="tabs" ng-controller="mycontroller">
<form role="form" name="form" novalidate class="form-body" ng-submit="save(form.$valid)">
<div class="modal-body" style="height: 400px;overflow-x: auto;">
<table class="table table-borderless" ng-if="options.length>0">
<thead>
<tr>
<td class="bold">Key</td>
<td class="bold">Value</td>
</tr>
</thead>
<tbody style="border: none;">
<tr ng-repeat="m in options">
<td ng-class="{ 'has-error': paramForm['optionKey_' + {{$index}}].$invalid && (paramForm['optionKey_' + {{$index}}].$touched || paramForm.$submitted) }">
<input type="text" name="optionKey_{{$index}}" class="form-control" ng-model="m.optionText" required />
</td>
<td ng-class="{ 'has-error': paramForm['optionValue_' + {{$index}}].$invalid && (paramForm['optionValue_' + {{$index}}].$touched || paramForm.$submitted) }">
<input type="text" name="optionValue_{{$index}}" class="form-control" ng-model="m.optionValue" required />
</td>
<td>
<a class="btn btn-xs" ng-click="Remove($index)"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
<div style="margin-left:5px">
<button type="button" class="btn btn-primary btn-sm" ng-click="Add()"><i class="fa fa-plus"></i> Add</button>
<button class="btn...
JavaScript
var app = angular.module('tabs', ['ui.bootstrap']);
app.controller("mycontroller", function($scope) {
$scope.options = [];
$scope.addOptions = function() {
$scope.options.push({});
};
$scope.Add = function() {
//Add the new item to the Array.
var option = {};
option.optionText = $scope.optionText;
option.optionValue = $scope.optionValue;
$scope.options.push(option);
//Clear the TextBoxes.
$scope.optionText = "";
$scope.optionValue = "";
};
$scope.Remove = function(index) {
//Find the record using Index from Array.
var name = $scope.options[index].optionText;
$scope.options.splice(index, 1);
};
$scope.save = function () {
console.log($scope.options);
};
});