I'm stuck with my foreach here. I have a page where a user can create a candidate and add work experience to it, and dynamically add fields using angularjs to fill the work exprience (exp[]) array:
(add candidate blade view)
<div class="form-group row">
<div data-ng-repeat="row in rows">
<div id="expDiv"
class="col-md-12 form-group row {{$errors->has('exp') ? ' has-danger' : '' }}">
<div class="col-sm-3">
<input type="text" name="exp[@{{ $index }}][title]" id="exp" placeholder="Title"
class="form-control {{ $errors->has('exp[][title]') ? ' form-control-danger' : '' }}"
value="{{old('exp[][title]')}}">
</div>
<div class="col-sm-5">
<input type="text" name="exp[@{{ $index }}][desc]" id="exp" placeholder="Description"
class="form-control {{ $errors->has('exp[][desc]') ? ' form-control-danger' : '' }}"
value="{{old('exp[][desc]')}}">
</div>
<div class="col-sm-3">
<input type="text" name="exp[@{{ $index }}][date]" id="exp" placeholder="Date"
class="form-control {{ $errors->has('exp[][date]') ? ' form-control-danger' : '' }}"
value="{{old('exp[][date]')}}">
</div>
<a class="btn btn-icon white col-sm-1 pull-right" data-ng-click="removeRow($index)">
<i class="fa fa-remove"></i>
</a>
</div>
</div>
</div>
<a class="btn btn-block btn-outline b-info text-info" data-ng-click="cloneRow()">
<i class="fa fa-plus pull-right"></i>
Add another entry
</a>
what the angular part does is limit the number of fields to 10 and make a new row everytime the button is clicked, it also lets the user remove added fields. (controller.js)
app.controller('candidateController', function ($scope, $http) {
$scope.rows = [0];
var counter = 0;
$scope.cloneRow = function () {
counter++;
if ($scope.rows.length == 10)
alert('Entry limit reached!');
else
$scope.rows.push(counter);
};
$scope.removeRow = function (rowIndex) {
$scope.rows.splice(rowIndex, 1);
}
});
after that the user can go to the candidate edit page, which gets loaded with php:
public function edit(Candidate $candidate) {
$branch = Branches::where('name', $candidate->branch)->first();
$categories = $branch->categories()->get();
$assigned = [];
foreach ($candidate->skills as $skill)
$assigned[] = $skill->id;
return view('candidates.edit', compact('candidate', 'assigned', 'categories'));
}
where the experiences relation (one to many) added to the candidate gets loaded into an blade foreach:
<div class="form-group row">
@foreach($candidate->experience as $exp)
<div id="expDiv"
class="expDiv col-md-12 form-group row {{$errors->has('exp') ? ' has-danger' : '' }}">
<div class="col-sm-3">
<input type="text" name="exp[][title]" id="exp" placeholder="Title"
class="form-control {{ $errors->has('exp[][title]') ? ' form-control-danger' : '' }}"
value="{{$exp->title}}">
</div>
<div class="col-sm-5">
<input type="text" name="exp[][description]" id="exp" placeholder="Description"
class="form-control {{ $errors->has('exp[][description]') ? ' form-control-danger' : '' }}"
value="{{$exp->description}}">
</div>
<div class="col-sm-3">
<input type="text" name="exp[][date]" id="exp" placeholder="Date"
class="form-control {{ $errors->has('exp[][date]') ? ' form-control-danger' : '' }}"
value="{{$exp->date}}">
</div>
</div>
@endforeach
</div>
but I don't know for the life of me how to use my angular script with the loaded data, I can't ofcourse just put in the ng-repeat because it would just clone the 3 already existing fields. How do I approach this? I hope it's not too confusing....
Thanks.
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community