Angular Populate Dropdown From Object Laravel

- 1 answer

Hi I'm using Angualr in order to populate select box, I am fetching a list of tags which are grouped together as follows (I've encoded in JSON using Laravel so that I can output it in a friendly format.);

Effort options to be populated in selected

 "5. XS":{"94":"01:00:00"},
 "4. S":{"96":"02:00:00"},
 "3. M":{"98":"04:00:00"},
 "2. L":{"100":"07:00:00"},"
 1. XL":{"102":"16:00:00"},
"0. XXL":{"104":"38:00:00"},
"105":"Estimate Required"

I also pass back the selected effort as follows;


Then in angular I do the following:

            .success(function (planning) {
                $scope.tasks = planningtasks;
                $ =
                $ =;
                $scope.auth = planning.auth;
                $scope.effortTags = planning.effort;                

Then in my view I do the following;

 <select ng-model="entity.selected_tags.effort"
         ng-options="effort for effort in effortTags.effort">

However I can't seem to get the options to be displayed, any ideas what I'm doing wrong?

I'm looking to recreate this dropdown with option groups, but some of the options may not have option groups, they may be an option in its own right, as in shown above in option "Estimate Required";

enter image description here

Which I've already been able to do using Laravel and jQuery.



You need to restructure the underlying JSON, e.g. like so

$scope.effortTags = [
     { category: "5. XS", id: "94", value: "01:00:00" },
     { category: "4. S", id: "96", value: "02:00:00" },
     { category: "3. M", id: "94", value: "04:00:00" },
     { category: "2. L", id: "94", value: "07:00:00" },
     { category: "1. XL", id: "94", value: "16:00:00" },
     { category: "0. XXL", id: "94", value: "38:00:00" },
     { id: "105", value: "Estimate Required" }

Then you can do this in the template:

<select ng-model="entity.selected_tags.effort"
         ng-options="effort as effort.value group by effort.category for effort in effortTags">