why my dropdwon adding a blank space angularjs

Question

i am fetching the data from webservice from angularjs and the data is coming in Json format

here is my js file

//getzonebyid
            $http.get('/zone.asmx/zone', {
                params: {
                    log: log,
                    pm: pm,
                    id: $scope.updateparam.Id
                }
            })

            .then(function (response) {
                {
                    $scope.gzone = response.data.zone;
                    console.log(response.data.zone);
                }
            });

and this is my dropdownlist

<select ng-model="uzone" ng-change="locationupd(c)">
       <option ng-repeat="l in gzone" value="{{l.jzone}}">{{l.jzone}}</option>
</select>

i dont have any idea why there is an extra blank space at the top of my dropdownlist, i just want my first option to be the first value coming from my database but i am stuck with the extra space contain by my dropdown

i alson tried

$scope.uzone=$scope.gzone[0].value;

but it does not help me please guys i am stuck on this from a days now

data in Json Format {"zone":[{"jzone":"South"},{"jzone":"East"},{"jzone":"North"},{"jzone":"West"}]}

@Sajeetharan `{"zone":[{"jzone":"South"},{"jzone":"East"},{"jzone":"North"},{"jzone":"West"}]}` — , Oct 21 '16 at 08:54
Change `$scope.uzone=$scope.gzone[0].value;`to `$scope.uzone = $scope.gzone[0]["jzone"];`. There is no `value` property to `gzone` object — Nishant123, Oct 21 '16 at 09:12
Possible duplicate of http://stackoverflow.com/questions/40148724/dropdown-is-passing-blank-value-in-my-update-syntax-angularjs#comment67567975_40148724 — Nishant123, Oct 21 '16 at 09:17

score 0 · Answer 1 · answered Oct 21 '16 at 08:56

That is happening because of, even it could be depend on the way that select tag you are writing , let me show you some examples you can get better knowledge :

(function(angular) {
  'use strict';
angular.module('staticSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     singleSelect: null,
     multipleSelect: [],
     option1: 'option-1'
    };

    $scope.forceUnknownOption = function() {
      $scope.data.singleSelect = 'nonsense';
    };
 }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="staticSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="singleSelect"> Single select: </label><br>
    <select name="singleSelect" ng-model="data.singleSelect">
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
    </select><br>

    <label for="singleSelect"> Single select with "not selected" option and dynamic option values: </label><br>
    <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
      <option value="">---Please select---</option> <!-- not selected / blank option -->
      <option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
      <option value="option-2">Option 2</option>
    </select><br>
    <button ng-click="forceUnknownOption()">Force unknown option</button><br>
    <tt>singleSelect = {{data.singleSelect}}</tt>

    <hr>
    <label for="multipleSelect"> Multiple select: </label><br>
    <select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple>
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
      <option value="option-3">Option 3</option>
    </select><br>
    <tt>multipleSelect = {{data.multipleSelect}}</tt><br/>
  </form>
</div>
</body>
</html>

my dropdown is working with static value but not with dynamic — , Oct 21 '16 at 09:02
Yes that is right, there is a problem in your intitialization $scope.gzone = response.data.zone; , please recheck it. — Jigar7521, Oct 21 '16 at 09:07

score 0 · Answer 2 · answered Oct 21 '16 at 09:07

0

The issue with your code is , you are using ng-model but not setting the default value for it,

  <select ng-init="selected='South'" ng-model="selected " ng-options="c.jzone as c.jzone for c in result.zone"></select>

DEMO

answered Oct 21 '16 at 09:07

Sajeetharan

216,225
63
350
396

default value is dynamic – Oct 21 '16 at 09:08
Whatever it is you need to set the value based on the logic – Sajeetharan Oct 21 '16 at 09:09
i set the value like`{{zone}}` but does not help – Oct 21 '16 at 09:10
@APIControls did you check the sample i showed above? – Sajeetharan Oct 21 '16 at 09:10
yes i do, and i dont have any problem in calling static data but have problem in calling dynamic data – Oct 21 '16 at 09:12
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126309/discussion-between-sajeetharan-and-api-controls). – Sajeetharan Oct 21 '16 at 09:50
Did you find a solution> – Sajeetharan Oct 21 '16 at 13:38

why my dropdwon adding a blank space angularjs

2 Answers2