Execute
<!DOCTYPE html> <html> <head> <title>Wikitechy AngularJS Tutorials</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> </head> <body ng-app="insertApp" ng-controller="insertCtrl"> <h1>MYSQL Insert with PHP in AngularJS</h1> <form name="userForm" ng-submit="submitForm()"> <p>Enter Name : <input type="text" required ng-model="user.name"> </p> <p>Enter Mobile : <input type="text" required ng-model="user.mobile"></p> <p>Enter Email : <input type="email" required ng-model="user.email"></p> <button type="submit">Insert</button><br> </form> <table border="1"> <tr> <th>Id</th> <th>Name</th> <th>Mobile</th> <th>Email</th> </tr> <tr ng-repeat="x in content"> <td>{{x.id}}</td> <td>{{x.name}}</td> <td>{{x.mobile}}</td> <td>{{x.email}}</td> </tr> </table> <h3>Please Use Ctrl+F5 for Refresh.</h3> </body> <script> var App = angular.module('insertApp', []); App.controller('insertCtrl', function($scope, $http) { $http.get("select.php").then(function(response) { $scope.content = response.data.details; }); $scope.user = {}; $scope.submitForm = function() { $http({ method : 'POST', url : 'insert.php', data : $scope.user, headers : {'Content-Type': 'application/x-www-form-urlencoded'} }) .success(function(data) { $scope.content = data; }); }; }); </script> </html>
www.wikitechy.com © Copyright 2016. All Rights Reserved.
