Spaces:
Running
Running
| <html ng-app="myApp"> | |
| <head> | |
| <title>AngularJS Form with Bootstrap</title> | |
| <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> --> | |
| <link rel="stylesheet" href="libs/bootstrap.min.css"> | |
| </head> | |
| <body ng-controller="MyController"> | |
| <div class="container"> | |
| <h1>AngularJS Form with Bootstrap</h1> | |
| <form name="myForm"> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>Text</th> | |
| <th>Description</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr ng-repeat="row in rows"> | |
| <td> | |
| <input type="text" name="id_{{$index}}" ng-model="row.id" class="form-control"> | |
| </td> | |
| <td> | |
| <input type="text" name="text_{{$index}}" ng-model="row.text" class="form-control"> | |
| </td> | |
| <td> | |
| <textarea name="description_{{$index}}" ng-model="row.description" class="form-control"> </textarea> | |
| </td> | |
| <td> | |
| <button type="button" class="btn btn-danger" ng-click="removeRow($index)">Remove</button> | |
| <button type="button" class="btn btn-primary" ng-click="updateRow($index)">Update</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <input type="text" disabled name="newId" ng-model="newRow.id" class="form-control"> | |
| </td> | |
| <td> | |
| <input type="text" name="newText" ng-model="newRow.text" class="form-control"> | |
| </td> | |
| <td> | |
| <input type="text" name="newDescription" ng-model="newRow.description" class="form-control"> | |
| </td> | |
| <td> | |
| <button type="button" class="btn btn-success" ng-click="addRow()">Add</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <!-- <button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid">Submit</button> --> | |
| <button type="button" class="btn btn-primary" ng-click="callapi()">Call API</button> | |
| </form> | |
| </div> | |
| <script src="libs/jquery-3.5.1.min.js"></script> | |
| <script src="libs/popper.min.js"></script> | |
| <script src="libs/bootstrap.min.js"></script> | |
| <script src="libs/angular.min.js"></script> | |
| <script> | |
| var app = angular.module('myApp', []); | |
| var baseurl='https://abhijitkumarjha88192-webui-fastapi.hf.space' | |
| app.controller('MyController', function ($scope, $http) { | |
| $scope.rows = [ | |
| ]; | |
| $scope.newRow = {id:0, text:"",description:""}; | |
| $scope.getall = function () { | |
| var req = { | |
| method: 'GET', | |
| url: baseurl + '/datas/getall', | |
| headers: { | |
| 'Content-Type': undefined | |
| }, | |
| //data: { test: 'test' } | |
| } | |
| $http(req).then(function (res) { | |
| console.log(res); | |
| $scope.rows=res.data.data; | |
| }, function (err) { | |
| console.log(err) | |
| }); | |
| }; | |
| $scope.submitForm = function () { | |
| // Handle form submission logic here | |
| console.log($scope.rows); | |
| }; | |
| $scope.removeRow = function (index) { | |
| var req = { | |
| method: 'GET', | |
| url: baseurl + '/datas/delete/' + $scope.rows[index].id, | |
| headers: { | |
| 'Content-Type': undefined | |
| }, | |
| //data: { test: 'test' } | |
| } | |
| $http(req).then(function (res) { | |
| console.log(res); | |
| $scope.rows.splice(index, 1); | |
| }, function (err) { | |
| console.log(err) | |
| }); | |
| }; | |
| $scope.updateRow = function (index) { | |
| // Handle row update logic here | |
| var row = $scope.rows[index]; | |
| console.log(row); | |
| }; | |
| $scope.addRow = function () { | |
| var req = { | |
| method: 'POST', | |
| url: baseurl + '/datas/create', | |
| headers: { | |
| 'Content-Type': "application/json" | |
| }, | |
| data: $scope.newRow | |
| } | |
| $http(req).then(function (res) { | |
| console.log(res); | |
| $scope.rows.push(res.data); | |
| $scope.newRow = {id:0, text:"",description:""}; | |
| }, function (err) { | |
| console.log(err) | |
| }); | |
| }; | |
| $scope.callapi = function () { | |
| var req = { | |
| method: 'GET', | |
| url: baseurl + '/datas/getall', | |
| headers: { | |
| 'Content-Type': undefined | |
| }, | |
| //data: { test: 'test' } | |
| } | |
| $http(req).then(function (res) { | |
| console.log(res) | |
| }, function (err) { | |
| console.log(err) | |
| }); | |
| } | |
| $scope.getall(); | |
| }); | |
| </script> | |
| <!-- <script> | |
| var app = angular.module('myApp', []); | |
| app.controller('MyController', function($scope, $http) { | |
| $scope.rows = [ | |
| { text: 'Row 1', description: 'Description 1', id: 1 }, | |
| { text: 'Row 2', description: 'Description 2', id: 2 }, | |
| { text: 'Row 3', description: 'Description 3', id: 3 } | |
| ]; | |
| $scope.newRow = {}; | |
| $scope.submitForm = function() { | |
| // Handle form submission logic here | |
| console.log($scope.rows); | |
| }; | |
| $scope.removeRow = function(index) { | |
| $scope.rows.splice(index, 1); | |
| $http.delete('/api/rows/' + $scope.rows[index].id) | |
| .then(function(response) { | |
| console.log('Row deleted successfully'); | |
| }) | |
| .catch(function(error) { | |
| console.log('Error deleting row:', error); | |
| }); | |
| }; | |
| $scope.updateRow = function(index) { | |
| // Handle row update logic here | |
| var row = $scope.rows[index]; | |
| console.log(row); | |
| $http.put('/api/rows/' + row.id, row) | |
| .then(function(response) { | |
| console.log('Row updated successfully'); | |
| }) | |
| .catch(function(error) { | |
| console.log('Error updating row:', error); | |
| }); | |
| }; | |
| $scope.addRow = function() { | |
| $scope.rows.push({ | |
| text: $scope.newRow.text, | |
| description: $scope.newRow.description, | |
| id: $scope.newRow.id | |
| }); | |
| $http.post('/api/rows', $scope.newRow) | |
| .then(function(response) { | |
| console.log('Row added successfully'); | |
| }) | |
| .catch(function(error) { | |
| console.log('Error adding row:', error); | |
| }); | |
| $scope.newRow = {}; | |
| }; | |
| }); | |
| </script> --> | |
| </body> | |
| </html> |