Multiple Autocomplete in AngularJS - PHP (Laravel)

Question

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%>">

No, I used Jquery finally. However, I would like to find a solution for this. Thanks. — Miguel Herreros Cejas
– Miguel Herreros Cejas, Commented Apr 4, 2017 at 7:02

boroboris · Accepted Answer · 2017-04-09 21:26:46Z

1

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>

edited Apr 9, 2017 at 21:26

answered Apr 9, 2017 at 18:37

boroboris

1,6201 gold badge20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Miguel Herreros Cejas Over a year ago

Mmm, interesting. Thanks for this.

boroboris Over a year ago

if it's the correct solution you could accept the answer. or post here if there is some kind of error in the code. :)

Collectives™ on Stack Overflow

Multiple Autocomplete in AngularJS - PHP (Laravel)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related