Laravel multiple data insert into database - arrays

i want to insert more items to one delivery_notes_id in Laravel. But i get the error "Array to String conversion". When i delete the code with $lastid then is no error.
Can you help me?
$data=$request->all();
$lastid=delivery_note::create($data)->id;
$delivery_note->datum = $data['datum'];
$delivery_note->customer_id = $data['customer'];
if(count($data['produkt']) > 0)
{
$data2=[];
foreach($data['produkt'] as $item => $value)
array_push($data2, [
'delivery_notes_id'=>$lastid,
'menge'=>$request['menge'][$item],
'einheit'=>$request['einheit'][$item],
'product_id'=>$request['produkt'][$item],
]);
Items::insert($data2);
}
return $this->index()->with([
'meldung_success' => 'Lieferschein wurde erstellt!'
]);
}
Here is the HTML Code. I've tried this with the following tutorial https://tsdurjoy.blogspot.com/2019/01/laravel-multiple-data-insert-into_20.html
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="container">
<h4 class="text-center"><i class="fas fa-chevron-left"></i> neuer LIEFERSCHEIN</h4>
<form class="row g-3" action="/delivery_note" method="post">
#csrf
<table>
<tbody>
<tr>
<label for="datum" class="form-label">Datum</label>
<input type="date" class="form-control" name="datum" id="datum" value="{{ old('datum') }}">
</tr>
<tr>
<label for="customer_id" class="form-label">Kunde</label>
<select id="customer_id" class="form-control" name="customer">
<option selected>Kunde wählen</option>
#foreach (App\Customer::get() as $customers)
<option value="{{$customers->id}} ">{!! $customers->customer !!}</option>
#endforeach
</select>
</tr>
<div id="more">
<tr>
<td>
<label for="menge" class="form-label">Menge</label>
<input type="text" class="form-control" name="menge[]" id="menge" value="{{ old('menge') }}">
</td>
<td>
<label for="einheit" class="form-label">EH</label>
<input type="text" class="form-control" name="einheit[]" id="einheit" value="{{ old('einheit') }}">
</td>
<td>
<label for="produkt" class="form-label">Produkt</label>
<select id="produkt" class="form-control" name="produkt[]">
<option selected>Produkt wählen</option>
#foreach (App\Product::get() as $produkt)
<option value="{{$produkt->id}}">{!! $produkt->produkt !!}</option>
#endforeach
</select>
</td>
</tr>
</div>
</tbody>
</table>
<div class="col-12 mt-2">
<a class="addRow" name="addRow" id="addRow">+ weiteres Produkt</a>
</div>
<div class="col-12 mt-4">
<button type="submit" class="btn btn-primary">SPEICHERN</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('.addRow').on('click', function() {
addRow();
});
function addRow() {
var tr = '<tr>'+
'<td>'+
'<input type="text" class="form-control" name="menge[]" id="menge" value="{{ old('menge') }}">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control" name="einheit[]" id="einheit" value="{{ old('einheit') }}">'+
'</td>'+
'<td>'+
'<select id="produkt" class="form-control" name="produkt[]">'+
'<option selected>Produkt wählen</option>'+
'#foreach (App\Product::get() as $produkt)'+
'<option value="{{$produkt->id}}">{!! $produkt->produkt !!}</option>'+
'#endforeach'+
'</select>'+
'</td>'+
'</tr>';
$('tbody').append(tr);
};
</script>

try like this one:
$data=$request->all();
$lastid=delivery_note::create($data)->id;
$delivery_note->datum = $data['datum'];
$delivery_note->customer_id = $data['customer'];
if(count($data['produkt']) > 0)
{
foreach($requsest->get('produkt') as $item => $value){
$data = new yourModelName();
$data->delivery_notes_id=$lastid;
$data->menge=$request->menge[$item];
$data->einheit=$request->einheit[$item];
$data->product_id=$request->produkt[$item]
$data->save();
}
}
return $this->index()->with([
'meldung_success' => 'Lieferschein wurde erstellt!'
]);
}

Related

How To Solve This Update Error In Laravel

I'm creating a web site. And I have created a registration page. I want to update my details.
But, It gives me this error and I have also uploaded a picture of errors below. -
Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
No message
** Error Picture
How can I Fix this ??
Here is my AdminPanel.blade.php
<table class="table table-bordered">
<tr>
<td> Name </td>
<td> Email </td>
<td> Images </td>
</tr>
#foreach($data as $value )
<tr>
<td> {{ $value->username }} </td>
<td> {{ $value->email }} </td>
<td> <img src='{{ $value->filemove }}' style='width:100px;height:100px;'> </td>
<td> <input type="submit" name="update" value="Update" class="btn-primary"> </td>
<td> <input type="submit" name="delete" value="Delete" class="btn-danger"> </td>
</tr>
#endforeach
</table>
Here is my AdminUpdate.blade.php
<form action="edit{{ $users[0]->id }}" method="post" enctype="multipart/form-data">
{{ method_field('PUT') }}
{{ csrf_field() }}
<div class="form-group">
<label>Username : *</label>
<input type="text" class="form-control" name="username" value="{{$users[0]->username}}" placeholder="Enter Your Username" required>
</div>
<div class="form-group">
<label>Email : *</label>
<input type="email" class="form-control" name="email" value="{{$users[0]->email}}" placeholder="Enter Your Username" required>
</div>
<div class="form-group">
<label>Password : *</label>
<input type="password" class="form-control" name="password" value="{{$users[0]->password}}" placeholder="Enter Your Password" required>
</div>
<div class="form-group">
<label>Upload Profile Picture :</label>
<input type="file" class="form-control-file" name="file_img" aria-describedby="fileHelp">
<small id="fileHelp" class="form-text text-muted">If U Want , U Can Skip Upload A Profile Picture</small>
</div>
#section('btnName',"Update")
<input type="submit" class="btn btn-primary" onclick="myFunction()" name="submit" value="#yield('btnName')">
</form>
Here is my AdminPanelController.php
<?php
namespace App\Http\Controllers;
use Auth;
use Illuminate\Http\Request;
use App\User;
use Validator;
use Illuminate\Support\Facades\Input;
class AdminPanelController extends Controller
{
public function index()
{
$data = User::all();
//$data = login::orderBy('created_at', 'desc')->get();
return view('AdminPanel', ['data' => $data]);
}
public function adminedit(Request $request, $id)
{
$this->validate($request, [
'email' => 'required'
]);
$users = User::find($request['id']);
$users->username = $request['username'];
$users->email = $request['email'];
$users->update();
return redirect('AdminPanel');
}
}
Here is my Route
Route::put('edit/{id}','AdminPanelController#adminedit');
you should replace your action url
//make sure you have $users[0]->id data here
<form action="{{ action('AdminPanelController#adminedit',['id'=> $users[0]->id]) }}" ....>

Angular JS reloading whole body when clicked on Other Tabs

My web page has 3 bootstrap tabs with data some data being populated run time. After page loads, tab1 looks fine and when I click on other tabs, whole body reloads and tab1 displays. I do not see any errors in Console.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<div class="container" -ng-controller="incidentSummaryCtrl" >
<div class="panel panel-primary">
<div class="panel-heading"><h3>Incident {{c.data.incidentData[0].incidentId}} </h3> </div>
<div class="panel-body" style="padding:0px">
<div class="panel-group">
<div class="container">
<div class="row text-center">
<h1 class="white"></h1>
</div>
<div class="row">
<div class="col-md-10">
<div class="tab" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Incident Information</li>
<li role="presentation" class="">Potential Indicators</li>
<li role="presentation" class="">Course of Action</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="Section1">
<div class="col-md-3 col-xs-3">
<p><label>First Name: </label> {{c.data.incidentData[0].firstName}} </p>
<p><label>Last Name: </label> {{c.data.incidentData[0].lastName}} </p>
<p><label>Email: </label> {{c.data.incidentData[0].email}} </p>
<p><label>Telephone Number: </label> {{c.data.incidentData[0].telephoneNumber}} </p>
<p><label>Reported Date: </label> {{c.data.incidentData[0].createdDate}} </p>
<p><label>Last Updated: </label> {{c.data.incidentData[0].lastUpdated}} </p>
</div>
<div class="col-md-3 col-xs-3">
<p><label>Incident #: </label> {{c.data.incidentData[0].incidentId}} </p>
<p><label>Status: </label> {{c.data.incidentData[0].incidentStatus}} </p>
<p><label>Category: </label> {{c.data.incidentData[0].incidentType}} </p>
<p><label>Organization: </label> {{c.data.incidentData[0].organization}} </p>
<p><label>Department: </label> {{c.data.incidentData[0].department}} </p>
<p><label>Assigned To: </label> {{c.data.incidentData[0].assignedTo}} </p>
</div>
<div class="col-md-12 col-xs-12">
<p><label for="notes">Notes:</label> </p>
<textarea class="form-control" rows="5" id="notes" ng-readonly="true">{{c.data.incidentData[0].note}}</textarea>
</div>
</div> <!-- End of Section1 -->
<div role="tabpanel" class="tab-pane fade" id="Section2">
<label>Extracted Potential Indicators</label>
<table class="table table-condensed table-hover table-bordered">
<thead>
<tr>
<th>No</th>
<th>Ranking</th>
<th>Indicator</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="indicator in c.data.indicatorsData track by $index" >
<td>{{indicator.number}}</td>
<td>{{indicator.urgencyRanking}}</td>
<td>{{indicator.indicatorText}}</td>
<td class="{{indicator.cssClass}}">{{indicator.indicatorStatus}}</td>
</tr>
</tbody>
</table>
</div> <!-- End of Section2 -->
<div role="tabpanel" class="tab-pane fade" id="Section3">
<p><label>Recommendation: </label> {{c.data.courseOfActionsData[0].recommendedName}} </p>
<p><label>Reasoning: </label> {{c.data.courseOfActionsData[0].reasoning}} </p>
<p><label>Select Course of Action: </label>
<select class="form-control" id="sel1" ng-model="selectedValue" style="max-width:700px">
<option ng-repeat="coa in c.data.ListOfCourseOfActionsData track by $index" value="{{coa.name}}" ng-selected="{{defaultvalue == c.data.courseOfActionsData[0].recommendedName}}">{{coa.name}}</option>
</select> </p>
<p><label>Additional Actions: </label> </p>
<div id="actions">
<label class="checkbox-inline"><input type="checkbox" value="" id="sendEmailUpdateToReporter">Send Email Update to Reporter</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="notifyIsp" ng-model="notifyIsp">Notify ISP</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="notifyDomainRegistrar" ng-model="notifyDomainRegistrar">Notify Domain Registrar</label> <br/>
<label class="checkbox-inline"><input type="checkbox" value="" id="sendEmailReceipt">Send Email Receipt to Reporter</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="setStatusOfTicketToResolved">Set Status of Ticket Resolved
</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="notifyProduction">Notify Production</label><br/>
<label class="checkbox-inline"><input type="checkbox" value="" id="resolveAndCloseTicket">Resolve and Close Ticket</label>
<label class="checkbox-inline"><input type="checkbox" value="" ng-model="checked" id="assignToGroup">Assign to Group</label>
<br/>
</div> <br/>
<div class="row">
<div id="assignment" class="col-md-4">
<b>Group Name:</b>
<select id="groupSelectedValue" ng-model="groupSelectedValue" style="max-width:700px" class="form-control">
<option value="Tier1">Tier1</option>
<option value="Tier2">Tier2</option>
<option value="Tier3">Tier3</option>
<option value="Tier4">Tier4</option>
<option value="Tier5">Tier5</option>
<option value="Halo Administrator">Halo Administrator</option>
</select>
</div>
<div class="col-md-4">
<b>Assign To:</b>
<select id="assignTo" ng-model="assignTo" style="max-width:700px" class="form-control" >
<option ng-repeat="user in (c.data.groupUsers | filter: {'groupName':groupSelectedValue}) track by $index" value="user.name">{{user.name}}</option>
</select>
</div>
</div>
<br/>
<div id="commentsSection" >
<div class="">
<span ng-hide="c.data.incidentData[0].incidentStatus == 'Closed'">
<b>Comments:</b> <textarea id="comments" class="form-control" ng-model="comments"> </textarea> <br/>
</span>
</div>
<br/>
<div class="">
<b>Comments History: </b>
<table class="table table-responsive">
<thead>
<tr>
<th>Comment </th>
<th>Entered Date </th>
<th>Entered By </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="text in c.data.commentshistory track by $index">
<td>{{text.comment}}</td>
<td>{{text.enteredDate}}</td>
<td>{{text.enteredBy}}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" ng-click="execute()">Execute</button>
<input type="hidden" id="sysId" value="{{sysId}}">
</div>
</div>
</div> <!-- End of Section3 -->
</div>
</div>
</div>
</div>
</div> <!-- End of Container -->
</div> <!--End of Panel Group -->
</div>
</div>
</div>
Angular JS Code:
(function()
{
"use strict";
var app=angular.module('indicatorModal',[]);
app.controller('incidentSummaryCtrl',['$scope',function($scope)
{
$scope.updateSelectedCoa=function()
{
//get Values from Form
var selectedCoa=jQuery("#sel1 option:selected").text();
var sendEmailUpdateToReporter=jQuery("#sendEmailUpdateToReporter").is(":checked");
var notifyIsp=jQuery("#notifyIsp").is(":checked");
var notifyDomainRegistrar=jQuery("#notifyDomainRegistrar").is(":checked");
var sendEmailReceipt=jQuery("#sendEmailReceipt").is(":checked");
var setStatusOfTicketToResolved=jQuery("#setStatusOfTicketToResolved").is(":checked");
var notifyProduction=jQuery("#notifyProduction").is(":checked");
var assignToNextTier=jQuery("#assignToNextTier").is(":checked");
var assignToGroup=jQuery("#assignToGroup").is(":checked");
var resolveAndCloseTicket=jQuery("#resolveAndCloseTicket").is(":checked");
var sysId=jQuery("#sysId").val();
var gr=new GlideRecord('x_19668_halo_incident');
gr.addQuery('sys_id',sysId);
gr.query(callbackFunction);
function callbackFunction(gr)
{
if(gr.next())
{
$scope.updateSelectedSysIdOfCoa(selectedCoa,sysId);
gr.send_email_update_to_reporter=sendEmailUpdateToReporter;
gr.notify_isp=notifyIsp;
gr.send_email_receipt_to_reporter=sendEmailReceipt;
gr.set_status_to_resolved=setStatusOfTicketToResolved;
gr.notify_production=notifyProduction;
gr.notify_domain_registrar=notifyDomainRegistrar;
gr.assign_to_tier=assignToNextTier;
gr.assign_to_group=assignToGroup;
gr.resolve_and_close_the_ticket=resolveAndCloseTicket;
gr.update();
}
}
};
$scope.updateSelectedSysIdOfCoa=function(selectedCoa,sysId)
{
var selectedCoaSysId='';
var gr1=new GlideRecord('x_19668_halo_selcted_ticket_course_of_action');
gr1.addQuery('incident_id',sysId);
gr1.query(callbackFunction2);
function callbackFunction2(gr1)
{
if(gr1.next())
{
var gr2=new GlideRecord('x_19668_halo_courseofactions');
gr2.addQuery('ticket_coa_name',selectedCoa);
gr2.query();
if(gr2.next())
{
selectedCoaSysId=gr2.sys_id+'';
}
gr1.ticket_coa_selected_id=selectedCoaSysId;
gr1.update();
}
}
};
$scope.passSysId=function(indicatorSysId,indicatorType)
{
var ipIndicatorsData = JSON.parse(sessionStorage.getItem('ipIndicatorsData'));
var domainIndicatorsData = JSON.parse(sessionStorage.getItem('domainIndicatorsData'));
var hashCodeIndicatorsData = JSON.parse(sessionStorage.getItem('hashCodeIndicatorsData'));
if(indicatorType == 'IP Address')
{
for(var indicator in ipIndicatorsData )
{
if(ipIndicatorsData[indicator].sysId == indicatorSysId)
{
jQuery("#indicatorId").text(ipIndicatorsData[indicator].indicatorId);
jQuery("#indicatorStatus").text(ipIndicatorsData[indicator].indicatorStatus);
jQuery("#indicatorType").text(ipIndicatorsData[indicator].indicatorType);
jQuery("#urgencyRanking").text(ipIndicatorsData[indicator].urgencyRanking);
jQuery("#completedEnrichCount").text(ipIndicatorsData[indicator].completedEnrichCount);
jQuery("#enrichStartTimestamp").text(ipIndicatorsData[indicator].enrichStartTimestamp);
jQuery("#enrichEndTimestamp").text(ipIndicatorsData[indicator].enrichEndTimestamp);
jQuery("#indicatorText").text(ipIndicatorsData[indicator].indicatorText);
$("#indicatorLink").attr("href", "https://dev21310.service-now.com/haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
}
}
}
else if(indicatorType == 'Full Qualified Domain Name (FQDN)')
{
for(var indicator in domainIndicatorsData )
{
if(domainIndicatorsData[indicator].sysId == indicatorSysId)
{
jQuery("#indicatorId").text(domainIndicatorsData[indicator].indicatorId);
jQuery("#indicatorStatus").text(domainIndicatorsData[indicator].indicatorStatus);
jQuery("#indicatorType").text(domainIndicatorsData[indicator].indicatorType);
jQuery("#urgencyRanking").text(domainIndicatorsData[indicator].urgencyRanking);
jQuery("#completedEnrichCount").text(domainIndicatorsData[indicator].completedEnrichCount);
jQuery("#enrichStartTimestamp").text(domainIndicatorsData[indicator].enrichStartTimestamp);
jQuery("#enrichEndTimestamp").text(domainIndicatorsData[indicator].enrichEndTimestamp);
jQuery("#indicatorText").text(domainIndicatorsData[indicator].indicatorText);
jQuery("#indicatorLink").attr("href", "https://dev21310.service-now.com/haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
}
}
}
else if(indicatorType == 'Hash Code')
{
for(var indicator in hashCodeIndicatorsData )
{
if(hashCodeIndicatorsData[indicator].sysId == indicatorSysId)
{
jQuery("#indicatorId").text(hashCodeIndicatorsData[indicator].indicatorId);
jQuery("#indicatorStatus").text(hashCodeIndicatorsData[indicator].indicatorStatus);
jQuery("#indicatorType").text(hashCodeIndicatorsData[indicator].indicatorType);
jQuery("#urgencyRanking").text(hashCodeIndicatorsData[indicator].urgencyRanking);
jQuery("#completedEnrichCount").text(hashCodeIndicatorsData[indicator].completedEnrichCount);
jQuery("#enrichStartTimestamp").text(hashCodeIndicatorsData[indicator].enrichStartTimestamp);
jQuery("#enrichEndTimestamp").text(hashCodeIndicatorsData[indicator].enrichEndTimestamp);
jQuery("#indicatorText").text(hashCodeIndicatorsData[indicator].indicatorText);
$("#indicatorLink").attr("href", "https://dev21310.service-now.com/haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
}
}
}
};
}]);
})();
I would suggest you to use Angular UI instead of bootstrap
https://angular-ui.github.io/bootstrap/

Angular Help List App

I'm creating an Angular app that adds info to a list but I can't seen to get the item to post. I want the use to add info to the form then the info is then add to the responsive table. I'm not sure if the function for the inputs are correct. Check out my code below.
angular.module('LumpSumApp', [])
.controller('LumpSumController', function() {
var lumpSumList = this;
lumpSumList.addLumpSum = function() {
lumpSumList.lumpsums.push({ select: lumpSumList.lumpSumType, done: false });
lumpSumList.lumpSumType = '';
lumpSumList.lumpsums.push({ select: lumpSumList.lumpSumCategory, done: false });
lumpSumList.lumpSumCategory = '';
lumpSumList.lumpsums.push({ text: lumpSumList.lumpSumEstimate, done: false });
lumpSumList.lumpSumEstimate = '';
lumpSumList.lumpsums.push({ text: lumpSumList.lumpSumExpenses, done: false });
lumpSumList.lumpSumExpenses = '';
lumpSumList.lumpsums.push({ file: lumpSumList.lumpSumQuote, done: false });
lumpSumList.lumpSumQuote = '';
lumpSumList.lumpsums.push({ file: lumpSumList.lumpSumReceipt, done: false });
lumpSumList.lumpSumReceipt = '';
};
});
<form class="form-inline" ng-submit="lumpSumList.addLumpSum()">
<div class="form-group">
<select class="form-control" ng-model="lumpSumList.lumpSumType">
<option>Select a Type</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select class="form-control" ng-model="lumpSumList.lumpSumCategory">
<option>Select a Category</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text" ng-model="lumpSumList.lumpSumEstimate" size="40" placeholder="Estimated Expenses">
</div>
<div class="form-group">
<input class="form-control" type="text" ng-model="lumpSumList.lumpSumExpenses" size="40" placeholder="Actual Expenses">
</div>
<div class="form-group">
<label class="btn btn-primary">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
<input type="file" ng-model="lumpSumList.lumpSumQuote" style="display: none;">
</label>
</div>
<div class="form-group">
<label class="btn btn-primary">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
<input type="file" ng-model="lumpSumList.lumpSumReceipt" style="display: none;">
</label>
</div>
<input class="btn btn-primary" type="submit" value="add">
</form>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Expense Type</th>
<th>Expense Category</th>
<th>Estimated Expenses</th>
<th>Actual Expenses</th>
<th>Upload Quote(s)</th>
<th>Upload Receipt(s)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="lumpsum in lumpSumList.lumpsums">
<td>{{lumpSumList.lumpSumType}}</td>
<td>{{lumpSumList.lumpSumCategory}}</td>
<td>{{lumpSumList.lumpSumEstimate}}</td>
<td>{{lumpSumList.lumpSumExpenses}}</td>
<td>{{lumpSumList.lumpSumQuote}}</td>
<td>{{lumpSumList.lumpSumReceipt}}</td>
</tr>
</tbody>
</table>
</div>
I reworked your code with changes to handle an array of objects.
The two keys here are the changes to the controller code and the changes to the HTML.
In the JavaScript, we first initialize the lumpSumList.lumpsums when the controller loads. Then, inside the function, each time the addLumpSum button is clicked, we create a new object to hold all the properties from the dropdowns, then push this object into the array.
In the HTML, we output the lumpsum values, rather than the dropdown values. Just as a quick fix, I also added value='' to the default options in the dropdown to get rid of the empty option.
angular.module('LumpSumApp', [])
.controller('LumpSumController', function() {
var lumpSumList = this;
lumpSumList.lumpsums = [];
lumpSumList.addLumpSum = function() {
var lumpsum = {
lumpSumType: lumpSumList.lumpSumType,
lumpSumCategory: lumpSumList.lumpSumCategory,
lumpSumEstimate: lumpSumList.lumpSumEstimate,
lumpSumExpenses: lumpSumList.lumpSumExpenses
};
lumpSumList.lumpsums.push(lumpsum);
lumpSumList.lumpSumType = '';
lumpSumList.lumpSumCategory = '';
lumpSumList.lumpSumEstimate = '';
lumpSumList.lumpSumExpenses = '';
};
});
<!DOCTYPE html>
<html ng-app="LumpSumApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="LumpSumController as lumpSumList">
<form class="form-inline" ng-submit="lumpSumList.addLumpSum()">
<div class="form-group">
<select class="form-control" ng-model="lumpSumList.lumpSumType">
<option value=''>Select a Type</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select class="form-control" ng-model="lumpSumList.lumpSumCategory">
<option value=''>Select a Category</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text" ng-model="lumpSumList.lumpSumEstimate" size="40" placeholder="Estimated Expenses">
</div>
<div class="form-group">
<input class="form-control" type="text" ng-model="lumpSumList.lumpSumExpenses" size="40" placeholder="Actual Expenses">
</div>
<div class="form-group">
<label class="btn btn-primary">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
<input type="file" ng-model="lumpSumList.lumpSumQuote" style="display: none;">
</label>
</div>
<div class="form-group">
<label class="btn btn-primary">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
<input type="file" ng-model="lumpSumList.lumpSumReceipt" style="display: none;">
</label>
</div>
<input class="btn btn-primary" type="submit" value="add">
</form>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Expense Type</th>
<th>Expense Category</th>
<th>Estimated Expenses</th>
<th>Actual Expenses</th>
<th>Upload Quote(s)</th>
<th>Upload Receipt(s)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="lumpsum in lumpSumList.lumpsums">
<td>{{lumpsum.lumpSumType}}</td>
<td>{{lumpsum.lumpSumCategory}}</td>
<td>{{lumpsum.lumpSumEstimate}}</td>
<td>{{lumpsum.lumpSumExpenses}}</td>
<td>{{lumpsum.lumpSumQuote}}</td>
<td>{{lumpsum.lumpSumReceipt}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

How to post dynamic form data in angularjs?

Am new to angularjs, i need to http post the dynamic form data to an API.
app.js
$scope.contacts = [
{ 'cpName':'',
'cpDesignation':'' ,
'cpDept': '',
'cpEmail': '',
'cpMobile':''
}
];
$scope.addRow = function(){
$scope.contacts.push({ 'cpName':$scope.cpName, 'cpDesignation': $scope.cpDesignation, 'cpDept':$scope.cpDept, 'cpEmail':$scope.cpEmail, 'cpMobile':$scope.cpMobile});
$scope.cpName='';
$scope.cpDesignation='';
$scope.cpDept='';
$scope.cpEmail='';
$scope.cpMobile='';
};
contact form
<form name="myform" role="form" ng-submit="addRow()">
<div class="row" ng-class="{true: 'error'}[submitted && myform.cpEmail.$invalid]">
<div class="form-group">
<label class="col-md-2 control-label">CONTACT PERSON</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpName"
ng-model="cpName" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DESIGNATION</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDesignation"
ng-model="cpDesignation" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DEPARTMENT</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDept"
ng-model="cpDept" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">EMAIL*</label>
<div class="col-md-4">
<input type="email" class="form-control" name="cpEmail"
ng-model="cpEmail" />
<span style="color:red" ng-show="myform.cpEmail.$dirty && myform.cpEmail.$invalid">
<span ng-show="myform.cpEmail.$error.required">Email is required.</span>
<span ng-show="myform.cpEmail.$error.email">Invalid email address.</span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">MOBILE</label>
<div class="col-md-4">
<input type="number" class="form-control" name="cpMobile"
ng-model="cpMobile" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Add" class="btn btn-primary"/>
</div>
</div>
</div>
</form>
<table>
<tr>
<th>CONTACT PERSON</th>
<th>DESIGNATION</th>
<th>DEPARTMENT</th>
<th>EMAIL</th>
<th>Mobile</th>
</tr>
<tr ng-repeat="contact in contacts">
<td>{{contact.cpName}} </td>
<td>{{contact.cpDesignation}} </td>
<td>{{contact.cpDept}} </td>
<td>{{contact.cpEmail}} </td>
<td>{{contact.cpMobile}} </td>
</tr>
</table>
I know how to handle a single form data but not dynamic data.. Any help will be appreciated.
Thank you
Use ng-repeat over the rows.. So, in starting your $scope.contacts has 1 row and hence it will show one row in html.. Now push new object to $scope.contacts and then 2 rows will come in UI.
So, now just by pushing empty object to $scope.contacts you can get any number of rows.
Don't worry about the data every row will maintain its own data in the $scope.contacts array .. and at last just send this object to server. So, now you have dynamic rows.
Define your form like this
<div class="row" ng-repeat="contact in contacts">
<div class="form-group">
<label class="col-md-2 control-label">CONTACT PERSON</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpName"
ng-model="contact.cpName" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DESIGNATION</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDesignation"
ng-model="contact.cpDesignation" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DEPARTMENT</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDept"
ng-model="contact.cpDept" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">EMAIL*</label>
<div class="col-md-4">
<input type="email" class="form-control" name="cpEmail"
ng-model="contact.cpEmail" />
<span style="color:red" ng-show="myform.cpEmail.$dirty && myform.cpEmail.$invalid">
<span ng-show="myform.cpEmail.$error.required">Email is required.</span>
<span ng-show="myform.cpEmail.$error.email">Invalid email address.</span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">MOBILE</label>
<div class="col-md-4">
<input type="number" class="form-control" name="cpMobile"
ng-model="contact.cpMobile" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Add" class="btn btn-primary"/>
</div>
</div>
</div>
<input type="button" value="Add" class="btn btn-primary" ng-click="upload()"/>
<table>
<tr>
<th>CONTACT PERSON</th>
<th>DESIGNATION</th>
<th>DEPARTMENT</th>
<th>EMAIL</th>
<th>Mobile</th>
</tr>
<tr ng-repeat="contact in contacts">
<td>{{contact.cpName}} </td>
<td>{{contact.cpDesignation}} </td>
<td>{{contact.cpDept}} </td>
<td>{{contact.cpEmail}} </td>
<td>{{contact.cpMobile}} </td>
</tr>
</table>
Here's your controller code
$scope.contacts = [{}];
$scope.upload = function(){
//api call
}
$scope.addRow = function(){
$scope.contacts.push({});
};

Country object is not displayed

I am new to Laravel and Angularjs. I would like some help on how to go about this.
Angular controller function
var loadTables = function(){
tableService.all(1,20)
.success(function(response){
console.log(response);
$scope.tables = response.data;
$scope.towns=response.town;
$scope.countrys=response.country;
$scope.package_lists=response.package_list;
$scope.categories=response.categories;
Laravel
$id = Auth::user()->id;
$packages = User::find($id)->packages;
//$packages=$packages->paginate(Input::get('perPage'))->toArray();
$countries = Country::lists('name', 'id');
$towns = Town::lists('name', 'id');
$categories = Category::lists('name', 'id');
$package_list=$packages->lists('name','id');
$packages->load('country');
return (['data'=>$packages,'town'=>$towns, 'categories'=>$categories, 'package_list'=>$package_list]);
View
<option ng-repeat="country in countrys" value="#{{country.id}}">#{{country.name}}</option>
1.The country values are not displayed in the view. how do i go about this.
<div ng-controller="tableController">
<a class="add-link btn btn-success" ng-click="toggleForm()" ng- hide="showForm">Add Packages</a>
<table class="table table-striped breathe" ng-hide="showForm">
<thead>
<tr><th>Name</th><th>About</th><th>status</th><th>Image</th> <th>Action</th></tr>
</thead>
<tbody>
<tr ng-repeat="table in tables">
<td>#{{table.name}}</td>
<td>#{{table.short_description}}</td>
<td>#{{table.status}}</td>
<td><img width="120" heigth="72" ng- src="#{{getImageSource(table.image)}}"/></td>
<td>
<button class="btn btn-sm btn-warning" ng- click="editTable(table.id)">Edit</button>
<button class="btn btn-sm btn-danger" ng- click="deleteTable(table.id, currentPage, $index)">Delete</button>
</td></tr>
</tbody>
</table>
<ul class="pagination" ng-hide="showForm">
<li ng-class="{'disabled':currentPage==1}"><a ng- click="loadFirstPage()">«</a></li>
<li ng-repeat="page in pages" ng-class="{'active':page==currentPage}"><a ng-click="loadNthPage(page)">#{{page}}</a></li>
<li ng-class="{'disabled':currentPage==lastPage}"><a ng-click="loadLastPage()">»</a></li>
</ul>
<form name="tablesForm" ng-show="showForm" class="col-md-4" enctype="multipart/form-data">
<div class="form-group">
Name<input type="text" name="number" ng-model="newName" class="form- control" required>
<em class="muted" ng-show="tablesForm.available.$pristine && tablesForm.available.$invalid">Required</em>
</div>
<div class="form-group">
Avarage Price<input type="text" name="seats" ng-model="newPrice" class="form-control" required>
<em class="muted" ng-show="tablesForm.available.$pristine && tablesForm.available.$invalid">Required</em>
</div>
<div class="form-group">
Short Description<input type="text" name="position" ng- model="newShort_description" class="form-control">
</div>
<div class="form-group">
Description<input type="textarea" name="description" ng-model="newDescription" class="form-control">
</div>
<div class="form-group">
Category<select type="text" id="category" ng-model="newCategory" class="form-control" required>
<option ng-repeat="category in categories" value="#{{category.id}}">#{{category.id}}</option>
</select>
<em class="muted" ng-show="tablesForm.available.$pristine && tablesForm.available.$invalid">Required</em>
</div>
<div class="form-group">
Country<select type="text" name="country" ng-model="newCountry" class="form-control" required>
<option ng-repeat="country in countrys" value="#{{country.id}}">#{{country.name}}</option>
</select>
<em class="muted" ng-show="tablesForm.available.$pristine && tablesForm.available.$invalid">Required</em>
</div>
<div class="form-group">
Town<select type="text" name="town" ng-model="newTown" class="form-control" required>
<option ng-repeat="town in towns" value="#{{town.id}}">#{{town.name}}</option>
</select>
<em class="muted" ng-show="tablesForm.available.$pristine && tablesForm.available.$invalid">Required</em>
</div>
<div class="form-group">
<img width="120" height="82" ng-src="#{{newThumbnail}}" ng-show="showEdit" style="display: block;" />
Image<input type="file" name="thumbnail" ng-file-select="onFileSelect($files)">
</div>
<div class="form-group">
<button class="btn btn-primary" ng-hide="showEdit" ng-click="tablesForm.$valid &&addNewTable(newNumber,newSeats,newPosition,newDescription,newAvailable, currentPage)">Add new table</button>
<button class="btn btn-primary" ng-show="showEdit" ng-click="tablesForm.$valid && updateTable(tableId, newNumber,newSeats,newPosition,newDescription,newAvailable)">Update table</button>
<button class="btn btn-danger" ng-show="showForm" ng-click="toggleForm()">Cancel</button>
</div>
You're not returning countries on the response list
Try the below code:
return (['data'=>$packages,'town'=>$towns, 'country':$countries, 'categories'=>$categories, 'package_list'=>$package_list]);
Edit: as per your comments, it shows that you're returning your data as objects, not arrays. For Angular to iterate through that data, it should be stored in an array.

Resources