AngularJS - Get objects in select element

Question

I need to list the all objects in the select element and the first object must be selected by default.

This is the controller to get all objects:

$scope.categories = function() {
    $http(
            {
                method : 'GET',
                url : '/prodemo/categories'
            }).success(
                    function(data, status, headers, config) {
                        $scope.categories = data;
            }).error(
                    function(data, status, headers, config) {
            });
};

And this is the select element:

<div data-ng-init="categories()">
    <select ng-model="category" ng-options="category.name for category in categories"> </select>
</div>

@Chrillewoodz Hi, there is no problem with the list, my problem is when I want to set the first object in the select element. I need the select element get the first object by default. — wilson
– wilson, Commented Jul 8, 2015 at 13:58

Chrillewoodz · Accepted Answer · 2015-07-08 14:03:40Z

2

Put this line in your controller:

$scope.category = categories[0];

It will initialize the first category option as the default one.

answered Jul 8, 2015 at 14:03

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

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

Comments

skubski · Accepted Answer · 2015-07-08 14:28:29Z

0

Firstly I would recommend you to use services instead of making $http calls in controller(s), to make modular, reusable and more testable code. (And what not advantages) Then, perhaps, you should take a look at controllerAs instead of using $scope.

Setting the default option can be achieved by using the first element of your array as the value of your model.

Here is a plunker (without controllerAs) that uses a service and resolves the data when done.

answered Jul 8, 2015 at 14:28

skubski

1,6162 gold badges21 silver badges27 bronze badges

Collectives™ on Stack Overflow

AngularJS - Get objects in select element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related