我使用的是Laravel 5.2 + angularjs。
目标：必须提交仅包含复选框的表单。根据选中的复选框，复选框id获取数据并返回视图。此返回的数据将显示在同一页面的其他div中。
例如：表单位于div1中，返回的数据应显示在div2，div3和div4中。隐藏的视图中只显示一个分区。
最终 - 我可以使用angular隐藏和显示分区，并且我可以使用ajax提交div1中的表单。但我无法将数据从控制器返回到视图（数据以json格式返回）并显示在其他部门上。
如何在视图上显示返回的响应json对象？
以下是我的代码：
路线：
Route::group(['middleware' => ['web']], function () {
Route::get('/form', 'PublicController@index'); // View will be displayed by using this method
Route::post('/form','PublicController@show'); // Form is submitted and data is returned using this "show" method
});
控制器：
class PublicController extends Controller
{
public function index(){
$crimetypes = crimetype::get();
$step1='';$step2='';$step3='';$step4='';$step5='';
return view('frontend.form')->withCrimetypes($crimetypes)->withStep1($step1)->withStep2($step2)->withStep3($step3)->withStep4($step4)->withStep5($step5);
}
public function show(Request $request, QuestionsRepository $questionsRepository){
$data = $questionsRepository->returnSteps($request);
$step1 = $data[0];
$step2 = $data[1];
$step3 = $data[2];
$step4 = $data[3];
$step5 = $data[4];
// Data is successfully coming till here...
return response()->json(['step1'=>$step1, 'step2'=>$step2, 'step3'=>$step3, 'step4'=>$step4, 'step5'=>$step5],200);
// Here it is not allowing to use any other return type other than response json..
}
}
查看：
<div ng-show="div1">
<div>
{!! Form::open(array('method'=>'POST','url'=>'/form','id'=>'formid'))!!}
<div class="col-md-12 row">
<h2>Step - 1</h2>
<hr>
<br><p>Please select the relevant check boxes below.</p>
</div>
@foreach($crimetypes as $crimeType)
<div class="col-md-4">
<ul class="list-unstyled">
<li>
<div class="checkbox">
<label>
<input value="{{$crimeType->id}}" type="checkbox" name="id[]" id="checkid"> {{$crimeType->type}}
</label>
</div>
</li>
</ul>
</div>
@endforeach
<div class="col-md-12 row">
<div class="form-group">
<br>
<hr>
<input type="submit" ng-click="click1()" value="Next" class="btn btn-default">
</div>
</div>
{!!Form::close()!!}
</div>
</div>
<!-- On submitting above form hide the above div and display below div...this is working fine..-->
<div ng-show="div2">
<div class="col-md-12 row">
<h2>Step - 2 : Crime Details</h2>
<hr>
<h3>Can You Tell Us About The Crime</h3>
<br>
<h5><strong>@if (!empty($step1[0])) ? {{$step1[0]->question}} : ''@endif?</strong></h5>
<div class="row">
<div class="control-group">
<div class="form-group col-md-3">
<input type="number" class="form-control nbr" placeholder="xxx-xxx-xxx">
</div>
<div class="col-md-9"></div>
</div>
</div>
<h5><strong>@if (!empty($step1[1])) ? {{$step1[1]->question}} : ''@endif?</strong></h5>
<div class="row">
<div class="control-group">
<div class="form-group col-md-3">
<input type="number" class="form-control nbr" placeholder="xxx-xxx-xxx">
</div>
<div class="col-md-9"></div>
</div>
</div>
<h5><strong>@if (!empty($step1[2])) ? {{$step1[2]->question}} : ''@endif?</strong></h5>
<div class="row">
<div class="control-group">
<div class="form-group col-md-3">
<input type="textarea" class="form-control nbr">
</div>
<div class="col-md-9"></div>
</div>
</div>
<div class="row">
<br>
<hr>
<div class="form-group col-md-2">
<button ng-click="click2()" class="btn btn-default">Next</button>
</div>
<div class="form-group col-md-offset-10">
<button ng-click="click2()" class="btn btn-primary">Skip</button>
</div>
</div>
</div>
</div>
<!-- Similarly there are three more div's where I have to display the fetched data...-->
脚本：
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('[name="_token"]').val()
}
});
$(document).ready(function(){
$('#formid').on('submit', function(e){
e.preventDefault();
var id = new Array();
$('input[name="id[]"]:checked').each(function()
{
id.push($(this).val());
});
var $form = $('form');
$.ajax({
url:$form.attr('url'),
type: $form.attr('method'),
data: {id},
dataType:'json',
success: function(data){
var step1 = data.step1;
var step2 = data.step2;
var step3 = data.step3;
var step4 = data.step4;
var step5 = data.step5;
// If I use success, I am able to get data to these variables but unable to make use them on view wherever required. But now I am trying to use the returned object directly on the view without callback in the ajax. Even by using callback if it is possible, please help me out...
}
});
});
});
</script>
答案 0 :(得分：0)
我解决了我的问题，这是我更改/添加的代码：
AngularJs文件：
formCtrl.js：
angular.module('formCtrl', []).controller('formController', function($scope, $http, Comment){
Comment.get().success(function(data){
$scope.crimeTypes = data[0];
});
$scope.div1 = true;
$scope.div2 = false;
$scope.div3 = false;
$scope.div4 = false;
$scope.div5 = false;
$scope.div6 = false;
$scope.div7 = false;
$scope.selected = {};
$scope.click1 = function(data){
var id = [];
for(var i in data){
if(data[i].selected==true){
id.push(data[i].id);
}
}
$scope.selected = {id};
$http({
method : 'POST',
url : '/index1',
data : $.param($scope.selected),
headers :{'Content-Type':'application/x-www-form-urlencoded'}
})
.success(function(data) {
console.log(data);
});
$scope.div1 = false;
$scope.div2 = true;
$scope.div3 = false;
$scope.div4 = false;
$scope.div5 = false;
$scope.div6 = false;
$scope.div7 = false;
};
$scope.click2 = function(){
$scope.div1 = false;
$scope.div2 = false;
$scope.div3 = true;
$scope.div4 = false;
$scope.div5 = false;
$scope.div6 = false;
$scope.div7 = false;
};
$scope.click3 = function(){
$scope.div1 = false;
$scope.div2 = false;
$scope.div3 = false;
$scope.div4 = true;
$scope.div5 = false;
$scope.div6 = false;
$scope.div7 = false;
};
$scope.click4 = function(){
$scope.div1 = false;
$scope.div2 = false;
$scope.div3 = false;
$scope.div4 = false;
$scope.div5 = true;
$scope.div6 = false;
$scope.div7 = false;
};
$scope.click5 = function(){
$scope.div1 = false;
$scope.div2 = false;
$scope.div3 = false;
$scope.div4 = false;
$scope.div5 = false;
$scope.div6 = true;
$scope.div7 = false;
};
$scope.click6 = function(){
$scope.div1 = false;
$scope.div2 = false;
$scope.div3 = false;
$scope.div4 = false;
$scope.div5 = false;
$scope.div6 = false;
$scope.div7 = true;
};
});
formService.js：
angular.module('formService',[])
.factory('Comment', function($http){
return {
get:function(){
return $http.get('/index1data');
}
}
});
main.js：
var app = angular.module('angularApp', ['mainCtrl','formCtrl','formService'], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
路由和控制器文件中没有代码更改。在视图中，仅使用复选框类代码更改了div，如下所示。
Laravel文件：
查看：
<div class="checkbox">
<input value="<%crimeType.id%>" type="checkbox" ng-model="crimeType.selected" id="<%crimeType.type%>">
<label for="<%crimeType.type%>"><% crimeType.type %></label>
</div>
注意：我没有使用我在问题中发布的ajax脚本。控制器和路径文件不会更改。