Why does select option using angularJs show first empty option?

Question

When I reload the page, the first option is always empty. I want the option containing text Any Make to be the default select option. Here is the code for my view:

  <select class="form-control" id="make" name="make" ng-init="Any Make" ng-model="makeSelected" ng-change="makeChanged()">
      <option value="0" selected="selected"> Any Make</option>
      <option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option>
  </select>

here is my controller code:

.controller("homeController", function ($scope, makeData, $http) {

            $scope.makeData = makeData;

            $scope.makeChanged = function () {
                $http({
                    method: "GET",
                    url: "homeService.asmx/GetModelById"})
                    .then(function (response) {
                        $scope.modelData = response.data;
                })
            }
        })

makeData is returned data from resolve property from routing, i am using ngrouter service provider. — Shaur Bin Talib
– Shaur Bin Talib, Commented Sep 3, 2017 at 20:54

Varun Sukheja · Accepted Answer · 2017-09-03 22:19:16Z

1

just remove ng-init and in your model give default value

   $scope.makeSelected = 0;

Here is a running fiddle for your code Click here

Fiddle for code with dynamic data Click here

edited Sep 3, 2017 at 22:19

answered Sep 3, 2017 at 21:03

Varun Sukheja

6,6748 gold badges67 silver badges102 bronze badges

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

5 Comments

Varun Sukheja Over a year ago

@Shaur Bin Talib if you find this answer useful mark it as resolved

Shaur Bin Talib Over a year ago

its still not solving my problem, can you try with dynamic data returned from $http service?

Varun Sukheja Over a year ago

what is the use of $scope.modelData = response.data; in your code

Shaur Bin Talib Over a year ago

thats a different story, on selection of any option from select dropdown, that function will be called to retrieve new data from web service.

Varun Sukheja Over a year ago

check this fiddle with dynamic data: jsfiddle.net/varunsukheja/hpLys3qk/2

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-09-03 20:57:10Z

If you aren't going to use ngOptions, at least get rid of that ng-init since it isn't a function, and in the controller function set $scope.makeSelected = 0;

Then you can remove the selected="selected" on that initial option, since the angularJS code will be handling what is selected.

See a demonstration below:

angular.module('app', [])
  .value('makeData', [{
    "make_id": 1,
    "make_name": "cat"
  },{
    "make_id": 2,
    "make_name": "dog"
  },{
    "make_id": 6,
    "make_name": "monkey"
  }])
  .controller("homeController", function($scope, makeData, $http) {
    //initialize the value associated with ng-model on the select list
    $scope.makeSelected = 0;
    $scope.makeData = makeData;

    $scope.makeChanged = function() {
      console.log('makeChanged');
      //$http() request removed because we don't have access outside this domain for AJAX requests.
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="homeController">
  <select class="form-control" id="make" name="make"  ng-model="makeSelected" ng-change="makeChanged()">
      <option value="0"> Any Make</option>
      <option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option>
  </select>
  <div>makeSelected: {{makeSelected}}</div>
</div>

i am using ng router and makeData is returned from resolve property. why are you making your own object? it works with own created object but not with dynamic data i guess. please see my code and suggest a solution according to that.
i appreciate that, but it works like this and does't work with dynamic data. please try and suggest a solution.
If that was so critical, then it should have been disclosed in your original question - remember to always create a minimal reproducible example! Please take this plunker and modify it such that the issue can be reproduced. I modified that from the example linked from the $route documentation and had to update the src of the route script file.
That answer is basically exactly what I said....it just has fewer words and no snippet example...

Collectives™ on Stack Overflow

Why does select option using angularJs show first empty option?

2 Answers 2

5 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Related