Wednesday, March 29, 2017

fill angularjs array with laravel php data

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

Advertisement