2016-03-17 39 views
1

我將表單輸入從角度傳遞到laravel視圖api。但數據不能保存在數據庫中。我收到以下錯誤消息在控制檯:我無法將數據從角度保存到後端laravel數據庫

error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.0/ngRepeat/dupes?p0=app%20in%20apps&p1=string%3A%3C&p2=%3C 
    at Error (native) 
    at http://localhost/myapp/public/app/lib/angular-1.5.0/angular.min.js:6:416 
    at http://localhost/myapp/public/app/lib/angular-1.5.0/angular.min.js:292:254 
    at http://localhost/myapp/public/app/lib/angular-1.5.0/angular.min.js:137:302 
    at m.$digest (http://localhost/myapp/public/app/lib/angular-1.5.0/angular.min.js:138:399) 
    at m.$apply (http://localhost/myapp/public/app/lib/angular-1.5.0/angular.min.js:141:341) 
    at g (http://localhost/myapp/public/app/lib/angular-1.5.0/angular.min.js:94:139) 
    at t (http://localhost/myapp/public/app/lib/angular-1.5.0/angular.min.js:98:260) 
    at XMLHttpRequest.u.onload (http://localhost/myapp/public/app/lib/angular-1.5.0/angular.min.js:99:297)(anonymous function) @ angular.js:13236 
apps.js:28 0 
http://localhost/myapp/public/api/apps Failed to load resource: the server responded with a status of 500 (Internal Server Error) 
I also get laravel errors: 
          <span class="exception_title"><abbr title="Illuminate\Database\QueryException">QueryException</abbr> in <a title="C:\xampp\htdocs\dukamart\vendor\laravel\framework\src\Illuminate\Database\Connection.php line 651" ondblclick="var f=this.innerHTML;this.innerHTML=this.title;this.title=f;">Connection.php line 651</a>:</span> 
span class="exception_message">SQLSTATE[23000]: Integrity constraint violation: 1048 Column associated with input values. 

我檢查我的laravel控制器似乎是罰款。我從彈出窗體發佈數據。

employeeController.php

<?php 

namespace App\Http\Controllers; 

use Illuminate\Http\Request; 

use App\Http\Requests; 
use App\Http\Controllers\Controller; 
use App\Employee; 

class Employees extends Controller 
{ 
    // 
    public function index($id = null) { 
     if ($id == null) { 
      return Employee::orderBy('id', 'asc')->get(); 
     } else { 
      return $this->show($id); 
     } 
    } 

    public function store(Request $request) { 
     $employee = new Employee; 

     $employee->name = $request->input('name'); 
     $employee->email = $request->input('email'); 
     $employee->contact_number = $request->input('contact_number'); 
     $employee->position = $request->input('position'); 
     $employee->save(); 

     return 'Employee record successfully created with id ' . $employee->id; 
    } 

//我的角度控制器

app.controller('employeesController', function($scope, $http, API_URL) { 
    //retrieve employees listing from API 
    $http.get(API_URL + "employees") 
      .success(function(response) { 
       $scope.employees = response; 
      }); 

    //show modal form 
    $scope.toggle = function(modalstate, id) { 
     $scope.modalstate = modalstate; 

     switch (modalstate) { 
      case 'add': 
       $scope.form_title = "Add New Employee"; 
       break; 
      case 'edit': 
       $scope.form_title = "Employee Detail"; 
       $scope.id = id; 
       $http.get(API_URL + 'employees/' + id) 
         .success(function(response) { 
          console.log(response); 
          $scope.employee = response; 
         }); 
       break; 
      default: 
       break; 
     } 
     console.log(id); 
     $('#myModal').modal('show'); 
    } 

    //save new record/update existing record 
    $scope.save = function(modalstate, id) { 
     var url = API_URL + "employees"; 

     //append Employee id to the URL if the form is in edit mode 
     if (modalstate === 'edit'){ 
      url += "/" + id; 
     } 

     $http({ 
      method: 'POST', 
      url: url, 
      data: $.param($scope.employee), 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }).success(function(response) { 
      console.log(response); 
      location.reload(); 
     }).error(function(response) { 
      console.log(response); 
      alert('This is embarassing. An error has occured. Please check the log for details'); 
     }); 
    } 

    //delete record 
    $scope.confirmDelete = function(id) { 
     var isConfirmDelete = confirm('Are you sure you want this record?'); 
     if (isConfirmDelete) { 
      $http({ 
       method: 'DELETE', 
       url: API_URL + 'employees/' + id 
      }). 
        success(function(data) { 
         console.log(data); 
         location.reload(); 
        }). 
        error(function(data) { 
         console.log(data); 
         alert('Unable to delete'); 
        }); 
     } else { 
      return false; 
     } 
    } 
}); 

當我點擊保存數據,我收到一條錯誤消息,我在employeeController有設置。 js控制器

$http({ 
      method: 'POST', 
      url: url, 
      data: $.param($scope.hotel), 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }).success(function(response) { 
      console.log(response); 
      location.reload(); 
     }).error(function(response) { 
      console.log(response); 
      alert('This is embarassing. An error has occured. Please check the log for details'); 
     }); 
    } 

這是我app.js

var app = angular.module(employees, []) 
     .constant('API_URL', 'http://localhost/myapp/public/api/'); 

我routes.php文件

Route::get('/api/v1/employees/{id?}', '[email protected]'); 
Route::post('/api/v1/employees', '[email protected]'); 
Route::post('/api/v1/employees/{id}', '[email protected]'); 
Route::post('/api/v1/employees/update/{id}',['as'=>'update','uses'=> '[email protected]']); 
Route::delete('/api/v1/employees/{id}', '[email protected]'); 

什麼可能是這個原因嗎?請幫忙。我試圖解決這個問題3天沒有成功。

我的資源/視圖/員工/ employee.php

<!DOCTYPE html> 
<html lang="en-US" ng-app="employeeRecords"> 
    <head> 
     <title>Laravel 5 AngularJS CRUD Example</title> 

     <!-- Load Bootstrap CSS --> 
     <link href="<?= asset('css/bootstrap.min.css') ?>" rel="stylesheet"> 
    </head> 
    <body> 
     <h2>Employees Database</h2> 
     <div ng-controller="employeesController"> 

      <!-- Table-to-load-the-data Part --> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th>ID</th> 
         <th>Name</th> 
         <th>Email</th> 
         <th>Contact No</th> 
         <th>Position</th> 
         <th><button id="btn-add" class="btn btn-primary btn-xs" ng-click="toggle('add', 0)">Add New Employee</button></th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="employee in employees"> 
         <td>{{ employee.id }}</td> 
         <td>{{ employee.name }}</td> 
         <td>{{ employee.email }}</td> 
         <td>{{ employee.contact_number }}</td> 
         <td>{{ employee.position }}</td> 
         <td> 
          <button class="btn btn-default btn-xs btn-detail" ng-click="toggle('edit', employee.id)">Edit</button> 
          <button class="btn btn-danger btn-xs btn-delete" ng-click="confirmDelete(employee.id)">Delete</button> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
      <!-- End of Table-to-load-the-data Part --> 
      <!-- Modal (Pop up when detail button clicked) --> 
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
          <h4 class="modal-title" id="myModalLabel">{{form_title}}</h4> 
         </div> 
         <div class="modal-body"> 
          <form name="frmEmployees" class="form-horizontal" novalidate=""> 

           <div class="form-group error"> 
            <label for="inputEmail3" class="col-sm-3 control-label">Name</label> 
            <div class="col-sm-9"> 
             <input type="text" class="form-control has-error" id="name" name="name" placeholder="Fullname" value="{{name}}" 
             ng-model="employee.name" ng-required="true"> 
             <span class="help-inline" 
             ng-show="frmEmployees.name.$invalid && frmEmployees.name.$touched">Name field is required</span> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label for="inputEmail3" class="col-sm-3 control-label">Email</label> 
            <div class="col-sm-9"> 
             <input type="email" class="form-control" id="email" name="email" placeholder="Email Address" value="{{email}}" 
             ng-model="employee.email" ng-required="true"> 
             <span class="help-inline" 
             ng-show="frmEmployees.email.$invalid && frmEmployees.email.$touched">Valid Email field is required</span> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label for="inputEmail3" class="col-sm-3 control-label">Contact Number</label> 
            <div class="col-sm-9"> 
             <input type="text" class="form-control" id="contact_number" name="contact_number" placeholder="Contact Number" value="{{contact_number}}" 
             ng-model="employee.contact_number" ng-required="true"> 
            <span class="help-inline" 
             ng-show="frmEmployees.contact_number.$invalid && frmEmployees.contact_number.$touched">Contact number field is required</span> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label for="inputEmail3" class="col-sm-3 control-label">Position</label> 
            <div class="col-sm-9"> 
             <input type="text" class="form-control" id="position" name="position" placeholder="Position" value="{{position}}" 
             ng-model="employee.position" ng-required="true"> 
            <span class="help-inline" 
             ng-show="frmEmployees.position.$invalid && frmEmployees.position.$touched">Position field is required</span> 
            </div> 
           </div> 

          </form> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-primary" id="btn-save" ng-click="save(modalstate, id)" ng-disabled="frmEmployees.$invalid">Save changes</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) --> 
     <script src="<?= asset('app/lib/angular/angular.min.js') ?>"></script> 
     <script src="<?= asset('js/jquery.min.js') ?>"></script> 
     <script src="<?= asset('js/bootstrap.min.js') ?>"></script> 

     <!-- AngularJS Application Scripts --> 
     <script src="<?= asset('app/app.js') ?>"></script> 
     <script src="<?= asset('app/controllers/employees.js') ?>"></script> 
    </body> 
</html> 
+0

嘗試使用郵遞員發佈的數據。它會工作或不檢查 –

+0

我收到類似的內部錯誤異常郵寄請求。某處應該有錯。請問我需要一些幫助。 – wafutech

+0

從上面的錯誤它就像你正在存儲數據庫中的錯誤值不遵循數據庫約束 –

回答

0

聽起來像是你的鑰匙查看正在以ng重複重複。不允許在中繼器中複製。使用'track by'表達式來指定唯一鍵。中繼器:應用程序中的應用程序,重複鍵:字符串:<,重複值:<

這個問題發生一次

無效: NG-重複=

「在[4,4]值」

有效 NG-重複=

0

在你app.js文件 「在[4,4]軌道由$索引值」。

更改第一行:

var app = angular.module('employees', ['ngRoute'])