Angular Populate Dropdown From Object Laravel
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;
{"67","697"}
Then in angular I do the following:
Planning.groom(id)
.success(function (planning) {
$scope.tasks = planningtasks;
$scope.name = planning.name
$scope.id = planning.id;
$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">
</select>
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";
Which I've already been able to do using Laravel and jQuery.
Answer
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">
</select>
Related Questions
- → "failed to open stream" error when executing "migrate:make"
- → October CMS Plugin Routes.php not registering
- → OctoberCMS Migrate Table
- → OctoberCMS Rain User plugin not working or redirecting
- → October CMS Custom Mail Layout
- → October CMS - How to correctly route
- → October CMS create a multi select Form field
- → October CMS - Conditionally Load a Different Page
- → How to disable assets combining on development in OctoberCMS
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → OctoberCms component: How to display all ID(items) instead of sorting only one ID?
- → In OctoberCMS how do you find the hint path?
- → How to register middlewares in OctoberCMS plugin?