实际上，我试图在插入新数据时自动更新页面。表示在视图页面上显示新输入的数据。有人能帮忙吗?当我插入数据时，我必须重新加载页面才能查看新插入的数据，这既笨重又费力。我想摆脱这项工作。
视图
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div id="upd_cnt" class="container">
<table border=1>
<td>
<h2>Rectangle dimension</h2><br/>
<table border=1>
<tr><td>Length:</td><td><input type="text" ng-model="lngth"><br/></td></tr>
<tr><td>Breadth:</td><td><input type="text" ng-model="brdth"><br/></td></tr>
<tr><td><input ng-click="store.reload();insertFunc(lngth,brdth)" type="submit" value="Submit"></td></tr>
</table>
<svg width="400" height="200" version="1.1">
<rect fill="red" x="20" y="20" width="{{brdtha}}" height="{{lngtha}}" />
<rect fill="blue" x="50" y="50" width="200" height="75" />
</svg>
</td>
<td>
<table border=1>
<tr>
<th>ID</th>
<th>Length</th>
<th>Breadth</th>
<th>Draw Rectangle</th>
</tr>
<tr ng-repeat="x in select_rectangle">
<td>{{x.id}}</td>
<td>{{x.length}}</td>
<td>{{x.breadth}}</td>
<td><input ng-click='show = true' type="submit" value="Draw" ng-model="myVar"></td>
<td><svg width="400" height="200" version="1.1">
<rect fill="red" x="20" y="20" width="{{x.breadth}}" height="{{x.length}}" ng-init='show = false' ng-show='show'/></td>
</svg>
</tr>
</table>
</td>
</table>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
//$scope.insertFunc = function(lngth, brdth) {
//$http.get("http://localhost/crud/public/insert_rectangle_dimension_page/"+lngth+"/"+brdth)
$scope.insertFunc = $timeout(function(lngth,brdth) {
$scope.lngtha = lngth;
$scope.brdtha = brdth;
$http({
method : 'POST',
url : 'http://localhost/crud/public/insert_rectangle_dimension_page',
data : {lngth:$scope.lngth, brdth:$scope.brdth}
})
.then(function successCallback(response)
{
console.log('successCallback');
console.log(response);
},
function errorCallback(response)
{
console.log('errorCallback');
console.log(response);
});
}
$http({method:'GET', url:'http://localhost/crud/public/rectangle_json_page'}).success(function(response){
$scope.select_rectangle = response;
});
});
</script>
</body>
</html>
控制器
<?php
namespace App'Http'Controllers;
use App'Http'Requests;
use Illuminate'Http'Request;
use DB;
use Session;
use Redirect;
class NewController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('auth');
}
public function rectangle_function(Request $request)
{
$select_rectangle = DB::select('select * from rectangle');
return view('rectangle');
}
public function rectangle_json_function(Request $request)
{
$select_rectangle = DB::select('select * from rectangle order by id desc');
return response($select_rectangle);
}
public function insert_rectangle_dimension_function(Request $request)
{
echo $rec_height = $request->lngth;
echo $rec_width = $request->brdth;
$rect = DB::table('rectangle')->insert(['length' => $rec_height, 'breadth' => $rec_width]);
}
}
路线
<?php
/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::auth();
Route::post('/insert_rectangle_dimension_page', 'NewController@insert_rectangle_dimension_function');
Route::get('/rectangle', 'NewController@rectangle_function');
Route::get('/rectangle_json_page', 'NewController@rectangle_json_function');
您应该调用一个函数，在插入之后再次获取数据。为代码中的任何错误道歉，我不习惯在angular控制器中注入作用域。例如:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
//$scope.insertFunc = function(lngth, brdth) {
//$http.get("http://localhost/crud/public/insert_rectangle_dimension_page/"+lngth+"/"+brdth)
$scope.insertFunc = $timeout(function(lngth,brdth) {
$scope.lngtha = lngth;
$scope.brdtha = brdth;
$http({
method : 'POST',
url : 'http://localhost/crud/public/insert_rectangle_dimension_page',
data : {lngth:$scope.lngth, brdth:$scope.brdth}
})
.then(function successCallback(response)
{
console.log('successCallback');
console.log(response);
//Function call to re-load data
$scope.loadData();
},
function errorCallback(response)
{
console.log('errorCallback');
console.log(response);
});
}
$scope.loadData = function(){
$http({method:'GET', url:'http://localhost/crud/public/rectangle_json_page'}).success(function(response){
$scope.select_rectangle = response;
});
}//end scope.loadData
});