angular populate dropdown from object laravel

Question

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.

What are you doing in the view? It seems that the editor dropped that part ... — NicBright
– NicBright, Commented Jan 17, 2016 at 13:58
@NicBright I've formatted my question, should be visible now — user0129e021939232
– user0129e021939232, Commented Jan 17, 2016 at 13:59

NicBright · Accepted Answer · 2016-01-17 14:53:22Z

2

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>

edited Jan 17, 2016 at 14:53

answered Jan 17, 2016 at 14:21

NicBright

8,0095 gold badges21 silver badges21 bronze badges

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

9 Comments

user0129e021939232 Over a year ago

thanks I've done that but now only the categories are displayed and I get [object object] returned in the select

user0129e021939232 Over a year ago

e.g. <optgroup label="5. XS"><option label="[object Object]" value="string:01:00:00">[object Object]</option></optgroup>

user0129e021939232 Over a year ago

even when i use the $scope.effortTags you pasted I get this object returned too, so I've structured it in the way you requested

NicBright Over a year ago

do you have a plunkr/jsfiddle/jsbin/codepen somewhere?

NicBright Over a year ago

ah Ok I'm sorry i got the ng-options part wrong. See here jsfiddle.net/cda0gu6y/3 I'll also update the answer

|

Collectives™ on Stack Overflow

angular populate dropdown from object laravel

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related