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 ">
<div class="col-sm-3">
<input type="text" name="exp[@][title]" id="exp" placeholder="Title"
class="form-control "
value="">
</div>
<div class="col-sm-5">
<input type="text" name="exp[@][desc]" id="exp" placeholder="Description"
class="form-control "
value="">
</div>
<div class="col-sm-3">
<input type="text" name="exp[@][date]" id="exp" placeholder="Date"
class="form-control "
value="">
</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;
$exp = json_decode($candidate->exp);
return view('candidates.edit', compact('candidate', 'assigned', 'categories', 'exp'));
}
where the assigned experience to the candidate gets loaded into an blade foreach:
<div class="form-group row">
@foreach($exp as $item)
<div id="expDiv"
class="expDiv col-md-12 form-group row ">
<div class="col-sm-3">
<input type="text" name="exp[][title]" id="exp" placeholder="Title"
class="form-control "
value="">
</div>
<div class="col-sm-5">
<input type="text" name="exp[][desc]" id="exp" placeholder="Description"
class="form-control "
value="">
</div>
<div class="col-sm-3">
<input type="text" name="exp[][date]" id="exp" placeholder="Date"
class="form-control "
value="">
</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.
via Thomas96