AngularJS Empty Select Options When Using Ng-Model

Question

Problem 1: (only occurs on Firefox, results vary in other browsers)

Every second refresh in the browser causes an empty option to be displayed as the default option. How can I fix this?

Problem 2: (occurs in all browsers)

What I want to do is to get the function to set the back to its default value. What happens though is that it sets "City" to 0 correctly, but it displays an empty option as the default option. Any reason why this is happening?

*Note: Try using different AngularJS versions, I have found changes depending on the AngularJS version

Final Outcome Wanted: Change the option to "---City---" on button click, without ever having a random empty option in the list.

angular.module("MyApp", []).controller("MyCtrl", function($scope) {
  $scope.CityChange = function() {
    $scope.City = 0;
  };
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body ng-app="MyApp" ng-controller="MyCtrl">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>

  <label>City</label>
  <select ng-model="City" ng-init="City='0'">
            <option value="0">---City---</option>
            <option value="1">City 1</option>
            <option value="2">City 2</option>
        </select><br><br> {{City}}
  <br><br>
  <button ng-click="CityChange()">Change City</button>

</body>

</html>

Yes $scope.City = '0'; does solve Problem 1, but Problem 2 is still unanswered. See my comment in Vivz — Frank, Feb 01 '18 at 08:06

score 1 · Accepted Answer · edited Feb 01 '18 at 10:18

1

You have to use $scope.City ="0";. You are assigning an integer in your code.

angular.module("MyApp", []).controller("MyCtrl", function($scope) {
    $scope.CityChange = function() {
        $scope.City = 0;
    };

    //init
    function init(){
        $scope.City=0
    };
    init();
});

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script src="script.js"></script>

    <label>City</label>
    <select ng-model="City">
        <option ng-value="0" disabled="disabled">---City---</option>
        <option ng-value="1">City 1</option>
        <option ng-value="2">City 2</option>
    </select><br><br>    
    {{City}}<br><br>   
    <button ng-click="CityChange()">Change City</button>

</body>
</html>

edited Feb 01 '18 at 10:18

Pankaj Parkar

130,886
22
223
289

answered Feb 01 '18 at 07:55

Vivz

6,547
2
17
33

Thank you this perfectly solves Problem 2 (such a stupid mistake lol). Problem 1 is still not solved here though. Try opening it in Firefox or Edge (it works perfectly in Chrome) and change values and refresh the pages and see how the random white option comes back again. See if you get the same results? – Frank Feb 01 '18 at 08:02
I am not able to reproduce the issue with this plunker on firefox https://plnkr.co/edit/7gtf77kiXWIsAQDzEm4Z?p=preview. What version of firefox are you using? When I refresh after selecting a value, it is getting changed back to default 0 with city in the select dropdown – Vivz Feb 01 '18 at 08:11
I don't get the issue using plnkr either. Try just throwing the code into an index.html and open that up – Frank Feb 01 '18 at 08:23
@Frank I have updated the code with integer values and ng-value. Try with this one and check if it is working in firefox – Vivz Feb 01 '18 at 09:05
1

Yes that solves it perfectly! Thank you very much for all your help :) – Frank Feb 01 '18 at 09:38
@Vivz I updated simple change, where I removed the uses of `ng-init`(which we shouldn't encourage anyone to use it) – Pankaj Parkar Feb 01 '18 at 10:19
@Vivz I encountered another problem relating to the same subject, but I started a new thread for it because I don't feel it is related enough to this thread. Would you mind having a look some time, you seem wise enough to solve the problem :) https://stackoverflow.com/questions/48560917/ng-switch-breaks-select-default-ng-init-value – Frank Feb 01 '18 at 10:53

AngularJS Empty Select Options When Using Ng-Model

1 Answers1