CODEWITHSUNDEEP
javascriptphpangularjslaravel
Miguel Herreros Cejas
Miguel Herreros Cejas

Reputation: 674

Multiple Autocomplete in AngularJS - PHP (Laravel)

Good Morning! I have a Multiple Autocomplete in AngularJS for show user's skills. I have two tables/variables in php, one with the skills that the user choosed ($cont->personal_skills_cat), and other with a list of Skills ($job_categories). I would like to show the skills that the client have in the Multiple Autocomplete, and can to add or remove, from a list of suggestions ($job_categories). It is my code for now. Thanks.

Note: It is in Laravel, so the Blade variables are in {{}} and the AngularJS variables are in <% %>

<label>Jobs Categories</label><br>
        <?
        $personal_skills_cat = $jobs_categories;
        $per_skills_cat = json_encode($personal_skills_cat);

        $per_skills_cats = $cont->personal_skills_cat;

        $per_skills_cats = json_decode($per_skills_cats);
        if(isset($per_skills_cats)):
        foreach ($per_skills_cats as $key => $skill_cat): ?>
            <span class="tag">{{$skill_cat->name}}</span>
        <? endforeach;endif;?>
        <br/><br/>

        <multiple-autocomplete id="skills_cat"
                               name="skills_cat"
                               ng-model="skillsFromApi"
                               css-class="someClass"
                               object-property="name"
                               suggestions-arr="{{$per_skills_cat}}">
        </multiple-autocomplete> 
        <input type="hidden" name="skills_cat" value="<%skillsFromApi%>">

Upvotes: 1

Views: 322

Answers (1)

boroboris
boroboris

Reputation: 1620

I've tried to perserve your original idea in the code, but I had to change few lines since there were errors. Also I don't have the access to your data so I had to improvise on that part.

PersonalSkillsController

var myApp = angular.module('myApp', ['multipleSelect']).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('<%').endSymbol('%>');
});

myApp.controller('PersonalSkillsController', ['$scope', function($scope){

    $scope.optionsList = [
        "Java",
        "C",
        "C++",
        "AngularJs",
        "JavaScript"
    ];

    $scope.selectedList = [];

    $scope.setSelectedList = function(list) {
        $scope.selectedList = list;
    };
}]);

PHP file

<body>

<?php
    $jobs_categories = ["Java","C"];
    $per_skills_cats = json_encode($jobs_categories);
?>

<div ng-controller="PersonalSkillsController" ng-init='setSelectedList(<?php echo $per_skills_cats; ?>)'>
    <multiple-autocomplete
            ng-model="selectedList"
            suggestions-arr="optionsList"></multiple-autocomplete>
</div>
</body>

Upvotes: 1

Related Questions